For day 4 of making something every day in December, I made an animated atom SVG on Codepen:
See the Pen Animated atom SVG by Brad Frost (@bradfrost) on CodePen.
I was feeling pretty tired last night so figured I'd chip away at a redesign of the Pattern Lab website (I'll no doubt share that work soon), maybe edit a couple things, and call it a night. I had to get the atomic design icons into the new site, and I decided to take a look at the underlying SVG code. It was...not pretty. The first thing I did is ran it through Jake's SVG OMG tool, but realized there was a bunch of unnecessary stuff in there from when those icons were created in Illustrator like 7 years ago.
So I threw it into Codepen and cleaned it up significantly. Once it was in Codepen, I figured I could have some fun. Despite having the privilege of seeing Sara and Sarah do some amazing hand-coding SVG work on stage at many conferences, I've never done anything like that myself. So I decided to have a bit of fun.
I learned quite a lot doing this, including:
- Better understanding the viewBox in SVG, which has always been super elusive
- Better understanding positioning objects in an SVG file
- Wrote my first-ever for loop in Sass
- Stupid easy theme switching using CSS custom properties
But I think the main thing I'm so excited about is that I set out to do something Very Productive That Needs To Get Done and ended up playing around with something fun that I have no idea will be useful by itself. And I feel like that's the whole point of this exercise: to have fun making things. I started out the night expecting to phone it in, but ended up with something really fun.
