Enter an SVG path data (the string inside the d
attribute) to visualize it and discover all its different commands
Or explore some examples
M 140,20
Pick up the pen and Move it to { x: 140, y: 20 }
C 73,20 20,74 20,140
Put down the pen and Draw a Bézier curve from the current point to a new point { x: 20, y: 140 }
The start control point is { x: 73, y: 20 } and the end control point is { x: 20, y: 74 }
c 0,135 136,170 228,303
Draw a Bézier curve from the current point to a new point { x: previous point + 228, y: previous point + 303 }
The start control point is { x: previous point + 0, y: previous point + 135 } and the end control point is { x: previous point + 136, y: previous point + 170 }
c 88,-132 229,-173 229,-303
Draw a Bézier curve from the current point to a new point { x: previous point + 229, y: previous point - 303 }
The start control point is { x: previous point + 88, y: previous point - 132 } and the end control point is { x: previous point + 229, y: previous point - 173 }
c 0,-66 -54,-120 -120,-120
Draw a Bézier curve from the current point to a new point { x: previous point - 120, y: previous point - 120 }
The start control point is { x: previous point + 0, y: previous point - 66 } and the end control point is { x: previous point - 54, y: previous point - 120 }
c -48,0 -90,28 -109,69
Draw a Bézier curve from the current point to a new point { x: previous point - 109, y: previous point + 69 }
The start control point is { x: previous point - 48, y: previous point + 0 } and the end control point is { x: previous point - 90, y: previous point + 28 }
c -19,-41 -60,-69 -108,-69
Draw a Bézier curve from the current point to a new point { x: previous point - 108, y: previous point - 69 }
The start control point is { x: previous point - 19, y: previous point - 41 } and the end control point is { x: previous point - 60, y: previous point - 69 }
Z
Draw a line straight back to the start
M 140,20
Pick up the pen and Move it to { x: 140, y: 20 }
C 73,20 20,74 20,140
Put down the pen and Draw a Bézier curve from the current point to a new point { x: 20, y: 140 }
The start control point is { x: 73, y: 20 } and the end control point is { x: 20, y: 74 }
c 0,135 136,170 228,303
Draw a Bézier curve from the current point to a new point { x: previous point + 228, y: previous point + 303 }
The start control point is { x: previous point + 0, y: previous point + 135 } and the end control point is { x: previous point + 136, y: previous point + 170 }
c 88,-132 229,-173 229,-303
Draw a Bézier curve from the current point to a new point { x: previous point + 229, y: previous point - 303 }
The start control point is { x: previous point + 88, y: previous point - 132 } and the end control point is { x: previous point + 229, y: previous point - 173 }
c 0,-66 -54,-120 -120,-120
Draw a Bézier curve from the current point to a new point { x: previous point - 120, y: previous point - 120 }
The start control point is { x: previous point + 0, y: previous point - 66 } and the end control point is { x: previous point - 54, y: previous point - 120 }
c -48,0 -90,28 -109,69
Draw a Bézier curve from the current point to a new point { x: previous point - 109, y: previous point + 69 }
The start control point is { x: previous point - 48, y: previous point + 0 } and the end control point is { x: previous point - 90, y: previous point + 28 }
c -19,-41 -60,-69 -108,-69
Draw a Bézier curve from the current point to a new point { x: previous point - 108, y: previous point - 69 }
The start control point is { x: previous point - 19, y: previous point - 41 } and the end control point is { x: previous point - 60, y: previous point - 69 }
Z
Draw a line straight back to the start