Morphing
One shape smoothly transforms into another. Used for icons, logos, and UI state changes — like the iPhone Dynamic Island.
Also called: shape morph, SVG morph, path animation
Diamond
How it works
SVG <path> elements with the same number of points can interpolate between d attributes. Libraries like GSAP MorphSVG or Flubber handle complex paths.
- CSS can't morph arbitrary paths — SVG or Canvas required
- Great for play/pause buttons, menu ↔ close icons