SVG & CSS Shape Morphing
I’ve recently been working on a new edition of my website, some minor updates to give it more oomph. One thing I’ve tried to keep up with is having something fun that people can interact with.
At the moment I’ve got a background of tessellating triangles that all fade in with different colours (from a randomised selection) at different times — and each one disappears under your mouse! This means you can wipe the screen clean! My description does it no justice: check it out yourself.
While I was figuring out what I wanted to build I was checking out Rogie King’s website and I fell in love with the subtle header animation he’s got going on:
Chrome has started to allow shape morphing through CSS. Here’s a Pen that demonstrates that. It’s even more limiting than SMIL though, being limited to the one browser and requiring a path with an identical number of points. Also not hardware accelerated, like all SVG.
Long story short, it’s all run by using CSS to animate the
To get this working I created a shape in Sketch and duplicated it twice to adjust the anchor points so that I had three variations — or three different states of the same shape. The most important thing to note here is that in order for this to work each shape must have the same number of points! If you can’t follow this rule or just can’t seem to get this to work; don’t worry because the JS libraries I mentioned will have your back.
While I didn’t end up using any of this for the website update it was a fun learning experience that’s led me down the path of SVG animation for projects I’ve had since.