The Many Tools for Shape Morphing
To no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let’s look at some of the options (with demos) and weigh the advantages and disadvantages.
The original, native technology for shape morphing is SMIL. We have both a guide to SMIL on CSS-Tricks, and an article talking about replacements for it, since it doesn’t work in Microsoft browsers and Blink threatened to yank it at one point.
I wouldn’t suggest doing important work in SMIL but it is OG shape morphing.
To get a feel for the must have same # of points thing, you might enjoy playing with Shape Shifter:
MorphSVG (Greensock GSAP Plugin)
Moving right along to probably the most robust possible option, Greensock’s MorphSVG is a powerhouse. Bear in mind:
MorphSVGPlugin is a bonus plugin for Club GreenSock members (“Shockingly Green” and “Business Green” levels). It’s our way of showing our gratitude to those who are fueling innovation at GreenSock.
Worth it. Just MorphSVG alone is amazing. Unlike almost any other shape morphing method, it can tween between shapes of any number of points. It does so performantly, in a safe cross-browser fashion, and gives you more fine grain control over how the animation goes down.
See the complex morphing happening here:
If you’d like to play with MorphSVG, I created a drag-and-drop Pen to morphing between any two shapes (best results with SVG’s with
viewBox="0 0 100 100" SVGs with just one
The newer anime.js library has shape morphing built in.
It’s a little hard to believe, but CSS is getting in on the shape morphing action! Eric Willigers, a Chrome developer, emailed me last year:
‘d’ has become a presentation attribute. This allows SVG path elements to be animated using CSS animations and Web Animations, with path(‘…’) keyframes.
I assume this is a spec change, so browsers other than Chrome will, presumably, start allowing this. For now, this works great in Chrome:
There is an SVG plugin for Kute.js that allows for the animation of SVG properties, including shape morphing.
The API gives you some control over the morphing, like how precise you want it to be and the ability to reverse the draw direction so different points match up to tween.
There is also a d3 plugin called d3-interpolate-path that helps make it better:
Interpolates path `d` attribute smoothly when A and B have different number of points.
If you happen to be a video person before you became a web person (or you’re still both) perhaps you have experience working in Adobe After Effects, which is all about creating “incredible motion graphics and visual effects”. The bodymovin library exports After Effects into SVG, including plenty of hot morphing action. Here’s a great demo: