SVG Playground
<path>
The most powerful SVG element. Write path d commands and see them render live.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"> <path d="M 40 140 Q 100 20 160 140 T 160 160 Z" fill="#ec4899" stroke="#831843" stroke-width="3" fill-rule="nonzero" stroke-linejoin="round" stroke-linecap="round" /> </svg>
Attributes
Tweak any value to update the preview live.
Path commands tell the pen where to move and how to draw:
Path commands: M L H V C S Q T A Z (lowercase = relative)
About the <path> element
The most powerful SVG element. Write path d commands and see them render live.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 <path> 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.