Write a d attribute, step through each command, and watch the path resolve in real time. The layout uses crisp contrast, soft borders, and focused panels instead of a bare utility shell.
Interactive editor
Relative coordinates, reflected control points, and the current pen position are all visualized directly in the canvas.
← → step · click a command to jump · lowercase = relative coordinates
What this is
Every SVG icon is a <path>, and every path is a sequence of pen commands in its d attribute. This tool executes that sequence one command at a time: the executed portion renders solid, the current command highlights in blue with its start point, end point, and Bézier control handles, and the rest stays as a faint outline.
Notes
Path command reference
| Cmd | Name | Parameters | What it does |
|---|---|---|---|
M | Move to | x y | Lift the pen and place it without drawing. Starts a new subpath. |
L | Line to | x y | Draw a straight line to the given point. |
H | Horizontal line | x | Straight line, only x changes. |
V | Vertical line | y | Straight line, only y changes. |
C | Cubic Bézier | x1 y1 x2 y2 x y | Curve shaped by two control points. |
S | Smooth cubic | x2 y2 x y | Cubic curve; first control point reflected from the previous C/S. |
Q | Quadratic Bézier | x1 y1 x y | Curve shaped by one control point. |
T | Smooth quadratic | x y | Quadratic curve; control point reflected from the previous Q/T. |
A | Arc | rx ry rot large-arc sweep x y | Elliptical arc segment between two points. |
Z | Close path | — | Straight line back to the start of the current subpath. |