code | December 19, 2014

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 criss cross the spindles dynamically.

3 spindles

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:

before element

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

after element

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

annotated single spindle

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:

scaling 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.