Morphing SVG Shapes

Published: August 2023

A gif of a snake shape that morphs into a circle shape after the user clicks a circle-button. While changing shape the color is also morphed from blue (snake) to orange (circle). The user then clicks the snake-button to reverse the effect.

Morphing two SVG shapes, powered by Flubber.js
Just for fun, also morphing between two colours, powered by D3-interpolate
All orchestrated by the mighty tweened store
The animation is controlled by the user clicking the button

Play with the code here:

Svelte REPL

Open REPL in new tab ← Back to all Sketches