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.
Did you enjoy this post? Support SisterSong. SisterSong strengthens and amplifies the collective voices of indigenous women and women of color to achieve reproductive justice by eradicating reproductive oppression and securing human rights.