SVG Playground
<path>
The most powerful SVG element. Write path d commands and see them render live.
Preview
SVG Code
<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:
M x y — move toL x y — line toH x — horizontal lineV y — vertical lineQ cx cy x y — quadratic curveC cx1 cy1 cx2 cy2 x y — cubic curveT x y — smooth quadraticS cx2 cy2 x y — smooth cubicA rx ry rot lg sw x y — arcZ — close path
1
x
y
2
cx
cy
x
y
3
x
y
4
Path commands: M L H V C S Q T A Z (lowercase = relative)