✨ SVG Playground
Every SVG tag, live and clickable
A hands-on reference to the SVG spec. Pick a tag, drag a slider, watch it render, copy the code. Built by infographic nerds.
Basic Shapes
Build visual primitives with a handful of attributes.
<circle>
Interactive SVG circle playground. Adjust radius, position, fill, stroke and copy the SVG code.
<ellipse>
Interactive SVG ellipse playground. Adjust radii, position, fill, stroke and copy the SVG code.
<rect>
Interactive SVG rectangle playground with rounded corners, fill, stroke controls. Copy the SVG code.
<line>
Draw lines in SVG. Set start and end points, stroke style, dash pattern and copy the SVG code.
<polyline>
Draw open multi-segment lines in SVG. Define points and style the stroke.
<polygon>
Draw closed polygons in SVG. Define points, fill, stroke, and copy the ready SVG code.
<path>
The most powerful SVG element. Write path d commands and see them render live.