See the Pen Snowflaker by Katy DeCorah (@katydecorah) on CodePen.

I really wanted to build something last night, heck, something seasonal. Something to celebrate the fact that I’m done teaching and my free-time is katy-time.

I decided to try a snowflake.

Building it out

With Haml, I spit out 3 div tags to act as the snowflake’s .spindles. I paired the Haml loop with a Sass loop to crisscross the spindles dynamically.

I created $w to manage the width of each spindle and sized the height at 1em. I always like to have at least one dimension at 1em, because I’ll drop a font-size on that element or its parent to allow the project to scale on 1em.

Next, I used box-shadow on the :before and :after to build the snowflake patterns off the spindles. This took some time to get just right because I had to think of each spindle. Each spindle is part of the pattern pie. Eventually, I got the :before to look like this thanks to box-shadow:

I added box-shadow to the :after to build the final pattern:

To really break it down, a single spindle looks like this:

Now put your finger at the top of the spindle and turn the bottom at (360/number of spindles) degrees and you’ll get the snowflake pattern.

Making it scale

I refactored the code to use variables wherever possible with the premise that if I add more spindles then the pattern would purr.

And it did!

If you update the number of spindles in the Haml and Sass, you’ll get a different snowflake. Here is 3 through 26 spindles:

You can play with the width of the spindles and patterns, too!

That was fun.

---