Most important fact: the shapes need to have the same number of points
Otherwise, the animation will just fail. The shape won't disappear or anything, but it won't animate.
view source
How SVG Shape Morphing Works
While animating SVG with CSS is easy and comfortable, CSS can't animate all the SVG properties that are possible to animate. For instance, all the properties that define the actual shape of the elements aren't possible to change or animate in CSS. You can animate them through SMIL though. Sara Soueidan covers this in her guide to SMIL here on CSS-Tricks, but I thought I would shine a light on this particular ability.
Most important fact: the shapes need to have the same number of points
Otherwise, the animation will just fail. The shape won't disappear or anything, but it won't animate.
Most important fact: the shapes need to have the same number of points
Otherwise, the animation will just fail. The shape won't disappear or anything, but it won't animate.
Advertisement
