NaN

Challenge

And that's all I have to say about SVG paths! To summarize, SVG paths are constructed with a series of path commands, each of which is followed by a series of coordinates. Path commands are grouped into three categories:

  • Move commands, which move the path's cursor to a new location without drawing anything;
  • Line commands, which draw straight lines from the cursor's current position to a new location, and;
  • Curve commands, which draw various types of curves starting from the cursor's current position.

Animations

One thing I didn't touch on in this guide is how to animate paths. I initially had animations in the first draft of the guide, but as I started writing it, I realized there was a lot to cover.

In the end, I decided to split off animations into a course called Interactive SVG Animations. If you enjoyed the teaching style of this guide, consider checking it out!

Challenges

The rest of this guide will be a leetcode-esque series of challenges - tracing over eight beautiful icons courtesy of Iconist's Central icon system. Massive kudos to them for allowing me to use their icons in this guide!

Note: While these icons were originally designed by Iconist's team, I've re-traced them to make them simpler to hand-code. As a result, they may not look 1-1 with the original!

0510152005101520
05101520250510152025

Cursors & Lines

  • M x y

    Moves the cursor to the position (x, y).

  • L x y

    Draws a line from the current position to (x, y).

  • H x

    Draws a horizontal line from the current position to x.

  • V y

    Draws a vertical line from the current position to y.

  • Z

    Draws a line from the current position to the start position.

Curves

  • C x1 y1, x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using (x1, y1) and (x2, y2) as control points.

  • S x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using the previous control point's reflection and (x2, y2) as control points.

  • Q x1 y1, x y

    Draws a quadratic bezier curve from the current position to (x, y), using (x1, y1) as a control point.

  • T x y

    Draws a quadratic bezier curve from the current position to (x, y), using the previous control point's reflection as a control point.

  • A rx ry x-axis-rotation large-arc sweep x y

    Draws an elliptical arc from the current position to (x, y).

05101520250510152025

Cursors & Lines

  • M x y

    Moves the cursor to the position (x, y).

  • L x y

    Draws a line from the current position to (x, y).

  • H x

    Draws a horizontal line from the current position to x.

  • V y

    Draws a vertical line from the current position to y.

  • Z

    Draws a line from the current position to the start position.

Curves

  • C x1 y1, x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using (x1, y1) and (x2, y2) as control points.

  • S x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using the previous control point's reflection and (x2, y2) as control points.

  • Q x1 y1, x y

    Draws a quadratic bezier curve from the current position to (x, y), using (x1, y1) as a control point.

  • T x y

    Draws a quadratic bezier curve from the current position to (x, y), using the previous control point's reflection as a control point.

  • A rx ry x-axis-rotation large-arc sweep x y

    Draws an elliptical arc from the current position to (x, y).

05101520250510152025

Cursors & Lines

  • M x y

    Moves the cursor to the position (x, y).

  • L x y

    Draws a line from the current position to (x, y).

  • H x

    Draws a horizontal line from the current position to x.

  • V y

    Draws a vertical line from the current position to y.

  • Z

    Draws a line from the current position to the start position.

Curves

  • C x1 y1, x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using (x1, y1) and (x2, y2) as control points.

  • S x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using the previous control point's reflection and (x2, y2) as control points.

  • Q x1 y1, x y

    Draws a quadratic bezier curve from the current position to (x, y), using (x1, y1) as a control point.

  • T x y

    Draws a quadratic bezier curve from the current position to (x, y), using the previous control point's reflection as a control point.

  • A rx ry x-axis-rotation large-arc sweep x y

    Draws an elliptical arc from the current position to (x, y).

05101520250510152025

Cursors & Lines

  • M x y

    Moves the cursor to the position (x, y).

  • L x y

    Draws a line from the current position to (x, y).

  • H x

    Draws a horizontal line from the current position to x.

  • V y

    Draws a vertical line from the current position to y.

  • Z

    Draws a line from the current position to the start position.

Curves

  • C x1 y1, x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using (x1, y1) and (x2, y2) as control points.

  • S x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using the previous control point's reflection and (x2, y2) as control points.

  • Q x1 y1, x y

    Draws a quadratic bezier curve from the current position to (x, y), using (x1, y1) as a control point.

  • T x y

    Draws a quadratic bezier curve from the current position to (x, y), using the previous control point's reflection as a control point.

  • A rx ry x-axis-rotation large-arc sweep x y

    Draws an elliptical arc from the current position to (x, y).

05101520250510152025

Cursors & Lines

  • M x y

    Moves the cursor to the position (x, y).

  • L x y

    Draws a line from the current position to (x, y).

  • H x

    Draws a horizontal line from the current position to x.

  • V y

    Draws a vertical line from the current position to y.

  • Z

    Draws a line from the current position to the start position.

Curves

  • C x1 y1, x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using (x1, y1) and (x2, y2) as control points.

  • S x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using the previous control point's reflection and (x2, y2) as control points.

  • Q x1 y1, x y

    Draws a quadratic bezier curve from the current position to (x, y), using (x1, y1) as a control point.

  • T x y

    Draws a quadratic bezier curve from the current position to (x, y), using the previous control point's reflection as a control point.

  • A rx ry x-axis-rotation large-arc sweep x y

    Draws an elliptical arc from the current position to (x, y).

05101520250510152025

Cursors & Lines

  • M x y

    Moves the cursor to the position (x, y).

  • L x y

    Draws a line from the current position to (x, y).

  • H x

    Draws a horizontal line from the current position to x.

  • V y

    Draws a vertical line from the current position to y.

  • Z

    Draws a line from the current position to the start position.

Curves

  • C x1 y1, x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using (x1, y1) and (x2, y2) as control points.

  • S x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using the previous control point's reflection and (x2, y2) as control points.

  • Q x1 y1, x y

    Draws a quadratic bezier curve from the current position to (x, y), using (x1, y1) as a control point.

  • T x y

    Draws a quadratic bezier curve from the current position to (x, y), using the previous control point's reflection as a control point.

  • A rx ry x-axis-rotation large-arc sweep x y

    Draws an elliptical arc from the current position to (x, y).

05101520250510152025

Cursors & Lines

  • M x y

    Moves the cursor to the position (x, y).

  • L x y

    Draws a line from the current position to (x, y).

  • H x

    Draws a horizontal line from the current position to x.

  • V y

    Draws a vertical line from the current position to y.

  • Z

    Draws a line from the current position to the start position.

Curves

  • C x1 y1, x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using (x1, y1) and (x2, y2) as control points.

  • S x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using the previous control point's reflection and (x2, y2) as control points.

  • Q x1 y1, x y

    Draws a quadratic bezier curve from the current position to (x, y), using (x1, y1) as a control point.

  • T x y

    Draws a quadratic bezier curve from the current position to (x, y), using the previous control point's reflection as a control point.

  • A rx ry x-axis-rotation large-arc sweep x y

    Draws an elliptical arc from the current position to (x, y).

05101520250510152025

Cursors & Lines

  • M x y

    Moves the cursor to the position (x, y).

  • L x y

    Draws a line from the current position to (x, y).

  • H x

    Draws a horizontal line from the current position to x.

  • V y

    Draws a vertical line from the current position to y.

  • Z

    Draws a line from the current position to the start position.

Curves

  • C x1 y1, x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using (x1, y1) and (x2, y2) as control points.

  • S x2 y2, x y

    Draws a cubic bezier curve from the current position to (x, y), using the previous control point's reflection and (x2, y2) as control points.

  • Q x1 y1, x y

    Draws a quadratic bezier curve from the current position to (x, y), using (x1, y1) as a control point.

  • T x y

    Draws a quadratic bezier curve from the current position to (x, y), using the previous control point's reflection as a control point.

  • A rx ry x-axis-rotation large-arc sweep x y

    Draws an elliptical arc from the current position to (x, y).