Morphing SVG Shapes

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

© 2023-2024 Sebastian Lammers

Scroll to top ↑