CSS Clip Path Generator

This generator outputs the CSS `clip-path: polygon(...)` function exclusively - every shape, even the Pentagon, Hexagon, Octagon and Star presets, is emitted as a list of `x% y%` vertex pairs rounded to one decimal place, with a duplicate `-webkit-clip-path` line for older WebKit. It ships 12 presets: Triangle, Rectangle, Pentagon, Hexagon, Octagon, Star, Arrow, Heart, Chevron, Parallelogram, Rhombus and Cross. The regular polygons (pentagon/hexagon/octagon) are computed trigonometrically around a center at 50%,50% with a 50% radius and a -90° start angle so the first vertex sits at the top; the Star preset is built from alternating outer and inner radii of 50 and 20 across ten points. Because the coordinates are percentages of the element's own reference box, the resulting clip-path is inherently responsive - the same `polygon()` reshapes as the element resizes rather than being pinned to fixed pixels.

The preview is a square canvas with a checkerboard backdrop where each vertex appears as a draggable control point; dragging clamps every coordinate to the 0-100% range so points can't leave the box, and a dashed blue SVG polygon outline (with `vectorEffect="non-scaling-stroke"`) traces the current shape. You can add vertices - a new point is inserted at the midpoint between the last and first existing points - up to a hard cap of 20, and remove them down to a minimum of 3 (the limits below which a polygon is invalid). A live Points list shows every coordinate, and the Inset slider (0-40%) shrinks the whole shape toward center by remapping each point through `x * (100 - 2*inset)/100 + inset`. Both mouse and touch handlers are wired, so the drag editing works on phones as well as desktop.

You can upload your own image (loaded via `URL.createObjectURL`, so it never leaves the browser) to preview how the clip will mask real content instead of the default placeholder. Note that the tool clips a polygon only: there is no `circle()`, `ellipse()`, or `inset()` output, and despite a `borderRadius` value carried in the shareable URL state, rounded/curved edges are not applied to the generated CSS - the result is always straight-edged polygon segments. The full configuration is encoded in the URL via the Share button so a specific shape and inset can be linked or bookmarked, and the Copy button writes the generated rule (wrapped in a `.clipped-element` selector) to the clipboard.