demo · v134
Path Builder
Build a shape() command-by-command. Add line, curve, arc, and close steps, tweak coordinates with live coordinate inputs, and watch the clip-path redraw in real time. Copy the generated CSS when you like it.
checking shape() support…
commands
how it works
Each row in the panel is one shape() command. The first command is implicitly the from point. Subsequent rows are appended with a leading comma. The CSS recomputes on every change and is written straight into clip-path: shape(...).
Spec commands you can build here:
line— straight line tox yhline/vline— axis-aligned shortcutscurve— cubic Bézier with one or two control pointsarc— elliptical arc with radius and sweepclose— close back to the starting point