Making things in December #4: Animated atom SVG

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.

Making things in December timeline: