Sparking Joy with SVGs: Learning to Animate My Logo Through SVG Animation
My fiancé is a bit of a nerd. Just in case I hadn't noticed, he reminded me yesterday by spending 14 hours at a Magic: the Gathering event a few cities over, which meant that I had the house to myself. Not to be outdone in the dork department, I decided this would be a great opportunity to spend the day learning something new: SVG animation.
I'm a big fan of Sarah Drasner, and have been since the start of my coding journey. Sarah is an employee at Microsoft and on the core team at Vue, but she's also well-known for her work with animating SVGs (she literally wrote the book on it). When I saw she had a new class on Frontend Masters on SVG animation, I was excited to try my hand at it. Since I was looking for a good weekend project, this seemed like a great fit.
Today I'm doing a walk-through of what I learned and how. This isn't a tutorial, but if you're interested in learning about SVG animation yourself, I hope you'll check out the resources I mention!
The Game Plan
My goal was to get a foundation in SVG animation. As a benchmark, I hoped to animate some icons I designed last year, and to make the A in my logo move.
I've never animated SVGs before, so to get a strong foundation, I ended up using a few different resources. Here's a quick overview of each.
Resources I Used
September 2016, 4 hours. I added this because I didn't have any background in CSS animations and I wanted to keep up! I loved the examples and practice assignments. The class assumes no prior knowledge of CSS animations and was really fun to do.
July 2018, 1 hour. Quick overview of a variety of animation techniques, both native (CSS animation) and external (using tools like GreenSock or Velocity). If you've done the Sarah Drasner course, you don't need to do this one, but it's helpful if you need more concrete examples for how to use GreenSock.
What I Learned
I had absolutely no foundation in SVG or CSS animation before this, and at the end of today, I feel that I got a solid foundation in both! I also learned a lot about the benefits of SVG animation (small file sizes, SVG is very well-supported, and it's accessible) and its possible applications (loaders, animations for fun, etc). I'd designed SVGs in Adobe Illustrator previously, but through these courses also learned to write SVGs using the previously-terrifying groups of numbers that are path and curve commands. Most importantly, I learned to spark joy through adorable moving icons, so I'll call this a win.
What I Made
Here's the fun part! In total, I made five small animated SVGs yesterday: a spinning sun, an icon of me that looks around, and three moving versions of my logo. I've included GIFs of the logo animations throughout the post as well as the codepens below.
Creepy Icon of Me Looks Around
I designed a set of icons of my best friends and me a few months back, and used these to make a small animation of me looking around. To do this, I used the
transform CSS property to
translateY on my eyes. It turned out vaguely creepy, but I literally clapped in excitement when I got it to work for the first time.
My Logo Smiles (I Thought This Would Look Cuter and More Impressive Than It Did)
My first logo animation goal was to make the swish on the A in my logo appear like a smile. I was able to do this pretty quickly using the CSS
stroke-dashoffset properties, but wasn't as happy with the result as I'd hoped. I decided to make my logo wave next, which I thought would take an hour and instead took one billion years (I write this to you from the afterlife).
My Logo Waves, a Small Feat that Makes Me Wish I Paid More Attention in Trigonometry
I set up a function called
wave. Inside the function, I changed the X coordinate of the swish tip according to the current time, limiting its value to be between 435 and 445 (line 11). Then I took the new X value and inserted it back into the SVG whenever the function is called (lines 13 to 15). To make the swish move over time, I used
requestAnimationFrame inside of my
wave function, and had it call the
wave function over and over as long as the the animation had been running for less than one second (line 5). Essentially, this meant that the hand would wave over and over within that one second, each time the function was called. The reason the cut-off time is 942.4777 milliseconds and not 1000 is because at one second, the swish's final position wasn't its starting position. I needed the swish to end in the exact position it started so that the logo looked normal after you'd hovered on it. To manipulate this and to get the curve of the swish right, I had to rely on some trigonometric functions to calculate the exact number of milliseconds needed, which brought me back to the feeling of intense despair I had in high school calculus class. Once I'd figured it out, though, I was able to call the function on hover (lines 19 through 24).
My Logo Blows a Raspberry
Once I'd figured out how to do this (I'll be real, it took several hours), it was easy to get one final animation out: a raspberry. What can I say, it was one in the morning.
Thanks so much for reading about my learning process! I really enjoyed working on it, and I now feel like I have a good enough foundational understanding of SVG animation to dig deeper and make some cooler stuff. If you're interested in learning more about SVG animations, I hope you'll check out some of the resources I listed above. And if you have any questions, please comment below! Let's start a conversation.