0100200300400500600010020030040050001002003004005006000100200300400500

SVG Path Visualizer

Enter an SVG path data (the string inside the d attribute) to visualize it and discover all its different commands

Or explore some examples

Line
Triangle
Quad
Curve
ZigZag
Arc
Smooth
Heart
Banana

Explanations

  • 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

Explanations

  • 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