demo · v135
Shape animation morph
Click morph and the browser interpolates between two shape() definitions using CSS transitions alone — no SVG SMIL, no JavaScript geometry. Adjust easing and duration to see how the engine blends move/line/arc commands.
shape(): ?
the CSS
.blob { clip-path: shape(from 50% 0%, line to 100% 50%, line to 50% 100%, line to 0% 50%, close); }
.blob.b { clip-path: shape(from 50% 0%, arc to 50% 100% of 50% 50% cw, arc to 50% 0% of 50% 50% cw, close); }
.blob { transition: clip-path 0.8s ease-in-out; }