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 cyan with its start point, end point, and Bézier control handles, and the rest stays as a faint outline. Lowercase commands are relative to the current pen position; uppercase are absolute — the pen coordinates in the corner show exactly where relative commands resolve to.
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. |
Notes worth knowing
- Extra coordinate pairs after a command repeat it implicitly —
L 4 4 8 8is two lines. After anM, extra pairs become implicitLcommands. The stepper splits these into separate steps, matching how the spec treats them. SandTreflect the previous curve's control point through the current pen position. If the previous command wasn't a curve of the matching family, the control point collapses to the pen position and the curve degrades to a near-line.- The copy button emits production-ready markup:
viewBoxonly,currentColor, no fixed width or height — size it with CSS.