v149 · CSS · clip-path

Shape Animation Morph

Because shape() functions with the same command count interpolate smoothly, you can morph between complex shapes purely with CSS @keyframes. No JavaScript, no SVG SMIL — just two clip-path values and a transition.

Your browser may not fully support clip-path: shape() with animation yet. The shapes below still render, but the morph animation may appear as a snap rather than a smooth tween. Try Chrome 149+.

choose shapes to morph between

0.8s  · 
The key rule: both shape() values must have the same number and type of path commands for the browser to interpolate between them. M + 3 L + Z can tween to another M + 3 L + Z — but not to M + 4 L + Z.

generated CSS

/* select two shapes and press Play */

see also