SVG Playground
<polygon>
Draw closed polygons in SVG. Define points, fill, stroke, and copy the ready SVG code.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"> <polygon points="100,20 180,80 150,180 50,180 20,80" fill="#8b5cf6" stroke="#4c1d95" stroke-width="3" fill-rule="nonzero" /> </svg>
Attributes
Tweak any value to update the preview live.
Closed shape — last point auto-connects to first
About the <polygon> element
Draw closed polygons in SVG. Define points, fill, stroke, and copy the ready SVG code. It's part of the standard SVG 1.1/2.0 vocabulary and is supported by every modern browser (Chrome, Firefox, Safari, Edge) plus mobile WebViews — no polyfill needed.
How to use the generator
Drag the sliders or type numeric values to tweak each attribute. The live preview updates instantly, and the SVG code panel below shows the exact markup you'd paste into an HTML page, a React component, or an Adobe Illustrator file. Click Copy to grab the snippet — no signup required, nothing uploaded to a server.
Where this fits
SVG primitives like <polygon> are the building blocks for everything you see in our /editor — every chart, icon, and diagram is composed from elements like this one. If you're hand-coding an icon, building a custom infographic, or preparing assets for a presentation, these generators save you from calculating coordinates by hand. Need ready-made vector art instead? Browse the /free-svg-illustrations library or convert a raster image with the /tools/jpg-to-svg-converter. To edit an existing SVG file, open /tools/svg-editor.