Polygon to clip-path & SVG

I've made a new clip-path-tool, which makes it easier to create equal-sided polygons, from 3-sided triangles to a hundred-sided hectogon.

You get live feedback and generated code for both CSS clip-path and inline SVG.

Drag the sides-range-slider to set the number of sides. The inset-range-slider creates a point on the middle of each side, and the amount you set drags it "inwards" for cool effects.

If you chose the first, transparent image, the color of the color-picker will be used:

Otherwise, chose one of the sample images:

When you hover the "Animation Preview"-area, you'll see a transition between the original inset and the animation inset:

The tool works best in fullscreen on Codepen, but here's an inline version as well:

If you prefer a clip-path-tool with draggable points (for simpler shapes), use my original tool:

Thanks for reading - hope you'll enjoy the tools!

Comments

[yuanc]

Hi, thanks for your great work, and how can I get the svg by css code like
clip-path: polygon(50% 0%,100% 0,100% 80%,50% 100%,0 80%,0 0);

I want get this svg

[Mads Stoumann]

You need to use points: developer.mozilla.org/en-US/docs/W...

So 50% 0%, 100% 0% become 50,0 100,0 etc.
Set viewBox to 0 0 100 100