SVG Path Editor

The d attribute defines the shape of an SVG <path> element using a sequence of commands like M (move to), L (line to), C (cubic Bézier curve), Q (quadratic Bézier), A (arc), and Z (close path). It's the most flexible way to draw shapes in SVG.

Click and drag any colored circle on the canvas to move that point. Round filled circles are anchor points (endpoints). Gray circles are Bézier control handles that affect curve shape without being on the path itself.

C (cubic Bézier) uses two control points per curve segment, giving you more precise control over curvature. Q (quadratic Bézier) uses one control point per segment, which is simpler but less flexible. Both are widely used in SVG illustrations and icon design.

Copy the output d attribute and paste it into your SVG file: <path d="M 50 100 ..." fill="none" stroke="black" stroke-width="2" />. You can also use the color picker to set your desired stroke color before copying.

Yes — the textarea below the canvas shows the raw path d attribute. Editing it updates the canvas in real time. You can type SVG path commands directly: M x y (move), L x y (line), C x1 y1 x2 y2 x y (cubic curve), Q x1 y1 x y (quadratic), Z (close).