Design Atlasclip-path doesn't actually crop or resize the element — it just hides whatever falls outside the shape you give it. The four most-used functions are circle(radius at centre), ellipse(rx ry at centre), polygon(point list), and inset(top right bottom left [round radius]).
Transitions used to only work between the same function (polygon to polygon, etc.), but modern browsers convert every basic-shape function into a shared internal path representation before comparing them, so a transition straight from circle() to polygon() now morphs smoothly. The demo shows exactly that — it just cycles through all four functions, and the browser interpolates between them on its own.
Like filter, transform, and opacity < 1, clip-path also creates a new stacking context (and in Chromium, its own compositing layer), so it adds up across many animated elements. It's also tempting to assume the hidden region blocks clicks by default — but that hit-testing behaviour isn't spec-guaranteed, so if clicks must be limited to the visible shape, add an SVG hit region or your own point-in-polygon check rather than relying on clip-path alone.
When to use
For image reveals, modal openings, or a floating action button that changes shape. If clicks must be confined to the visible shape, add your own hit-testing.