Morphing SVGs

I pushed out what I think is a pretty cool feature to my Cover2 theme.

It’s always bothered me a little bit that the navbar icons weren’t actual icons. Ever since Cover v1.0, they’ve been <div> and <span> tags hacked together to look like icons. For Cover2, I used code generated by Transformicons, but it still bugged me. And now, here I am using nice SVGs for all the rest of the icons; surely I can use SVGs for the navbar icons and morph them. Well, now I am.

I started out by recreating the icons using the same SVG source as Cover2 uses in CodePen. There are a few SVG morphing libraries to choose from: GreenSock’s MorphSVG plugin, Snap.svg, and Morpheus SVG. I created a pen for each.

GreenSock MorphSVG

GreenSock’s plugin, in my opinion, is both the easiest to work with and has the nicest morph transitions. It actually requires two libraries: TweenMax and MorphSVG. And while the first is free to use, use of the second requires a paid subscription.


From what I’ve read, Snap.svg is supposed to be the best SVG animation library out there. This one required the least amount of markup, so it’s got that going for it. But for some reason, the transition from the “hamburger icon to close icon” transition breaks something in the close icon.

Morpheus SVG

Per the documentation, this one requires a very specific markup. Beyond that, its implementation is pretty straightforward.

The transitions in Snap.svg and Morpheus SVG are pretty similar, the broken close icon notwithstanding. But I’ll be honest, I really prefer GreenSock’s plugin, but I don’t have $99 to drop on a subscription, and I haven’t even read up on if they allow you to use it in an open-source project. I’ll take what I can get, and I’m happy to finally be rid of hacky custom elements in favor of SVG, which I know will be rendered by every modern browser in exactly the same way.