New Projects

It’s been a few months, and I have a handful of new projects to post about finally. I haven’t done many CSS illustrations so far this year, but I’m ramping up again on Codepen. In addition to two illustrations, I have two little tech demos that I’ve started on. Both need a little more work to get where I want them to be, but they were fun to create and helped round out my knowledge of JavaScript manipulation of CSS.


Desert Dream

Desert Dream is an illustration I worked on around April of this year. It depicts an arid, southwestern, scene of a gas station with clouds rolling slowly across the sky. The foreground with the gas station is fairly simple, just CSS shapes put together to form the objects. In the background the mountain range is made using a CSS clip path, which is duplicated using pseudo elements to create the effect of having mountains closer and farther away. The clouds are also single div elements with an elliptical shape as the base, and then two circles using pseudo-elements to make the top “puffs” of the clouds. Finally the background dots in the sky are made using embedded SVG patterns.

See the Pen Desert Dream by Alex Goff (@alexgoff) on CodePen.

Chesire Clock

Chesire Clock is part illustration, part functional piece. The clock displays the current system time on an analog face with seconds, minutes, and hours displayed. The clock hands and movement are based on several JavaScript clocks. Second and minute hands move in stepped animations around the face of the clock and have a bezier curve to their transition that simulates a bounce as the hands move. The hour hand moves continuously. The data is also displayed beneath the clock hands using a simple JavaScript function that grabs the current date and outputs it in short form.

Additionally the cat’s tail moves as a pendulum with the second hand moving as the tail hits its peak on each swing. The cat is a CSS illustration and does not have anything that is particularly more complex or different than previous illustrations.

See the Pen Chesire Clock by Alex Goff (@alexgoff) on CodePen.

Other Projects

3D Cube

A smaller project, this 3D cube is created using div elements that are transformed and translated. By clicking on the edges of the cube, JavaScript functions are called to rotate the cube. This piece is only partially functional, once CSS transformations are applied it is difficult to change the axis of rotation. Right now rotations can only be applied once, and are applied using the CSS rotate3d() property. The end goal for this is to be able to rotate the cube in any direction an unlimited number of times.

See the Pen 3D Cube by Alex Goff (@alexgoff) on CodePen.

Unicode Picture

This illustration/demo is based on work by front end developer Yuan Chuan and their CSS Doodle library. I wrote a simple Unicode character generator that can accept an input to limit the characters generated. In this case, I hard coded it to use “25” as the base which limits the options to all Unicode characters whose code point ranges from U+2500 to U+25FF. I would like to eventually add more options to the generator like specifying a range, and excluding ranges of characters.

div elements are created and put into a 7×7 grid, with characters centered and justified in the middle of their grid cell. The characters themselves are inserted into pseudo elements of the div using data attributes. Some randomization is also applied to the characters by applying a random color from a pre-defined palette, and applying a random multiple-of-90deg rotation.

See the Pen Unicode Picture by Alex Goff (@alexgoff) on CodePen.

New CSS Drawing

Not a big post, just wanted to add a new CSS drawing for February. It’s been a while so here is a little older house situated in front of the water (ocean?).

See the Pen CSS Drawing: House by Alex Goff (@alexgoff) on CodePen.

CSS Drawings

I have been doing some CSS recently, trying to improve drawing skills and learning CSS animations. I’ve found that CSS drawing has also taught me much more about positioning than I knew before

First drawing:

An illustration of what my desk at work looks like

See the Pen CSS Desk Drawing by Alex Goff (@alexgoff) on CodePen.

A cactus:

See the Pen CSS Cactus by Alex Goff (@alexgoff) on CodePen.

A sleeping bear:

See the Pen CSS Images 001 Bear Cub by Alex Goff (@alexgoff) on CodePen.

Web Typography Demo

For an upcoming presentation on web typography, I put together a demo piece showing simple steps that can be taken to improve readability of text. The demo takes the first few paragraphs of Charles Dickens’ “A Tale of Two Cities” and shows the steps that can be taken from no formatting, to easy readability. These include appropriate line-heights, margins, letter-spacing, line-measure, and font pairings.

Many of these principles can be seen in the Type CSS Framework that I posted about recently. A quick overview:

Line Height

Increasing line-height can improve readability, and help readers follow lines more easily. For this demo, I set the body line-height to 1.5 and the header to 1.25. Line height should always be set as a multiplier of the font-size, not an explicit height in pixels, ems, or percentages.


To keep the vertical rhythm consistent, a 1.5rem margin is applied to the bottom of all headings and paragraphs. I am a proponent of single-direction margins to avoid “margin collisions” where a top and bottom margin may run up against each other. Likewise with horizontal margins, using “margin-right” will maintain consistency. By only using “margin-bottom” and “margin-right” all margins are created flowing from the top-left of the page.


Different from kerning, letter-spacing defines the space between all characters on the page. For this demo, the spacing is set to 0.01rem. More on using rem, I prefer rem over em because all rem units refer to the font-size defined in the html element of the page. Since em units refer to their parent element, if the font-size changes then sizing will no longer be consistent across the page.


The measure of the page can be controlled by sizing the width. There is no recommended measure in the demo, but between 60 and 90 characters is accepted as optimum for readability. Too wide of a page makes it difficult to track lines, and too short begins to feel disjointed and difficult to follow text line-to-line.


One of the more subtle changes to the text, changing the header and body to #222 and #444, respectively, makes for slightly lower contrast. This lower contrast still passes webAIM standards, but is softer on the eyes when reading for a long period of time.

Font Pairing

A simple two-font pairing, using two system font-stacks, the pairing creates a visual hierarchy between the headers and body.

Web Typography Demo

Type CSS Framework

I have been working on a small CSS framework the past few weeks. It is at the point where I am comfortable putting it in the wild and hopefully it is not in too bad of shape. The goal for Type CSS is to create minimal, highly readable web content. It is not intended as a fully fledged framework a la Bootstrap, Foundation, etc. Its spiritual predecessor is Skeleton CSS, a small lightweight boilerplate. Type CSS is slightly larger, and more feature filled so it is a bit more of a framework than a boilerplate.


  • Flexbox-based grid system
  • Flexbox utility classes
  • Typography that took a few days to get “right”
  • Buttons, forms, tables, utility classes, and all the other goodies

Now… transitioning this blog to Type CSS will be the real test. Currently it is running off my tweaked fork of Skeleton.

Feedback is always welcome via email, GitHub, etc.

GitHub Repository

Demo Page

Oregon Trail Name Generator

Oregon Trail Wagon
I got the Oregon Trail card game the other day for nostalgic purposes. Making up names for the game was fun, so I took a bit of time to make a name generator for those of us that struggle to think of what our Wild West name might be. Here’s the link:

Oregon Trail Name Generator

Used in this project:

  • Typed.js
  • jQuery
  • Simple Responsive Grid
  • Google Fonts

FlightSimCon 2016 Presentation

At FlightSimCon 2016, in Hartford, CT, I had the chance to present with Misha Cajic. Our topic of choice was how to plan, start, and most importantly finish a scenery project. Most of our advice came from personal experience, mixed with seeing obstacles other flight simulation developers have had.

Watch on AirDailyX’s YouTube channel:

Native Prepar3D Format Ground Polygons

With the recent release of Prepar3D v3.3 brought a surprise change, not all FS2002 ground polygons worked anymore. Many had flashing textures, missing layers, or otherwise created issues. The official support for FS2002 ground polygons was dropped during the Prepar3D v2.x release period, and has been unsupported through the entire life of Prepar3D v3. However, up until now they simply worked as they did before with a few tweaks required.

What are FS2002 ground polygons?

A ground polygon is the common term for the 3D model that represents the runway, taxiway, apron, and other hard surfaces at an airport. They are not necessarily limited to these areas, some include grass, dirt paths, and more. They differ from other 3D models like buildings and aircraft because of their two dimensional nature. Ground polygons are comprised of several (or many) layers of polygons stacked on top of each other to form the end result. One of the best tutorials showing this layering is written by Bill Womack.

Graphical engines often struggle to properly render polygons that are in very close proximity, in the flight simulation world we most commonly recognize this as flashing textures, where two textures seem to fight to display at once. The common term for this is z-fighting. The initial solution for these issues was put out in the Flight Simulator 2002 SDK, where display layers could be defined and the simulator would display them in the correct order, with no z-fighting issues. This solution remained through FS2004, FSX, and Prepar3D v1. Ground polygons could also be developed through other methods, using newer techniques and avoiding these display layers. Often alternatives are used to create ground polygons with more advanced materials such as normal maps and specular maps, which are not supported by the FS2002 method.

Why is this an issue now?

In Prepar3D 2.x, a new addition to the SDK was made that allowed for making ground polygons outside of the FS2002 layering method. It was created to bring ground polygons up to date with the new DirectX 11 graphics pipeline. FS2002 ground polygons continued to work without issue, and often times were easier and better documented. Fs2002 ground polygons are now beginning to create issues in the latest version of Prepar3D and look to be on their way toward both official and now complete deprecation.

What are the steps for making a native Prepar3D ground polygon?

It is honestly, not very hard. If you have figured out the behemoth of making an FS2002 ground polygon, then the Prepar3D format is not much harder. The official documentation can be found in the Prepar3D SDK under Modeling Materials. Here is a step by step on implementing this, and retaining your FSX BGL exports at the end.

This guide assumes you have created ground polygons for FSX previously, and are either looking to convert an existing model or make a new one using native format.

  1. Open your model in 3DS Max using the Prepar3D v2.x+ SDK.
  2. Open the Material Editor and select one of the textures in your ground polygon model. Scroll down to the “Material Alpha Test” section and set the z-bias value. This value can be any integer between -1 and -50. -1 is the lowest display priority and -50 is the highest. Referring back to Bill Womack’s ground polygon tutorial, the base tiling asphalt layer would be -1, runway markings -2, cracks & details -3, and noise overlay -4.
  3. Ground Polygon Layers with Z-Bias set

  4. Two additional material settings must be set also, under “Enhanced Parameters” set “No Z Write” and “No shadow”. These two settings flag the material to be rendered using the new z-bias settings.
  5. Additional remarks on P3D ground polygons, I have found that ensuring all vertices are set to 0.0m on the z-axis in 3DS Max prevents flickering. Previously ModelConverterX flattened out models but this does not seem to work anymore.
  6. Export as normal, and open the model in ModelConverterX’s ground polygon wizard. Check that your negative z-bias values are preserved in the “layer” column. I use the following settings under the options:
    • Slice polygons (100 meter)
    • Optimize reference point location
    • Prevent autogen exclusion
    • P3D v2

    ModelConverterX Ground Polygon Settings

  7. To export for FSX, I simply create a new Ground Polygon Wizard save file, and convert the negative offset values to positive values. Use normal FSX export settings and all of the extra material settings for Prepar3D will be stripped away upon export.

Other differences between FS2002 ground polygons and Prepar3d

Prepar3D ground polygons do not support seasonal variations like FS2002 ground polygons. To create these variations, like snow in winter, multiple ground polygons must be created. To switch the variants the ground polygon must be manually changed by the user outside the simulator, changed using a control panel interface outside the simulator, or changed dynamically with an external module.

In exchange for this loss you get more advanced material settings, better performance and lower memory usage, and have a better guarantee that your scenery will continue to work as Prepar3D progresses.

Comments and questions

If you have further questions or want a point clarified please reach out and email me 


During this semester, I took an introductory course to 2D animation. Many of the principles behind modeling in 3DS Max carry over to 2D animation so it was an interesting course. My first animations followed a loose story based on my cat, as a mail delivering, flying cat. The third project of the semester I switched gears and tried to do something more abstract, here is the result of about two months of animating!

Calcutron 5000

Calcutron 5000 is a JavaScript calculator with a vintage styling. It is inspired by the big, bulky, ugly beige calculators of the 1980’s, complete with chunky keys and loud keypresses. Designing Calcutron was part of a DailyUI challenge. The original CodePen concept is here:

See the Pen Daily UI #04 by Alex Goff (@alexgoff) on CodePen.

Since then, I have been refining and improving Calcutron by cleaning up its interface to be fully responsive across almost all screen sizes. Additionally the layout has been rearranged, keypress sounds have been added, and the JavaScript calculations have been improved.

Check out Calcutron 5000