SVG Path Editor

SVG paths are specified as a list of commands. Each command describes a step along the path. This editor allows you to create an SVG by editing the individual commands that describe its shape.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path fill="" d="
(x, y)
i
Move the pen from its current position to x,y
(x, y)
i
Draw a straight line from the current position to x,y
(x1, y1, x2, y2, x, y)
i
Draw a bézier curve from the current position to x,y with x1,y1 as the start control point and x2,y2 as the end control point
(x, y)
i
Draw a straight line from the current position to x,y
(x1, y1, x2, y2, x, y)
i
Draw a bézier curve from the current position to x,y with x1,y1 as the start control point and x2,y2 as the end control point
(x, y)
i
Draw a straight line from the current position to x,y
(x1, y1, x2, y2, x, y)
i
Draw a bézier curve from the current position to x,y with x1,y1 as the start control point and x2,y2 as the end control point
(x, y)
i
Draw a straight line from the current position to x,y
(x1, y1, x, y)
i
Draw a bézier curve from the current position to x,y with a single control point at x1,y1
i
Draw a straight line from the current position back to the start of the path
"></path>
</svg>
0
0
100
100