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.
See the Pen Snowflaker by Katy DeCorah (@katydecorah) on CodePen.
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.
$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
Next, I used
box-shadow on the
: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 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.