Quick cheatsheet from the SVG <path> tutorial from MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

SVGPathCheatsheet.md

Letter-casing:

CAPITALS = Global coordinates
lowercase = relative coords

Line Commands:

M x y: Move to
m x y: move to, relative to last position
L x y: Line to
l x y: line to, relative to last position
H x: Horizontal line to position x
h x: horizontal line of x units
V y: Vertical line to position y
v y: vertical line of y units
Z: Close path
z: Close path

C: Cubic bezier

C x1 y1, x2 y2, x y: Takes in 2 control points and ending anchor point

• [x1 y1]: control point @ start of curve
• [x2 y2]: control point @ end of curve
• [x y]: Ending anchor point

S: Continued cubic bezier

S x2 y2, x y: Draws curve to [x y] with [x2 y2] as ending control point.

• [x2 y2]: Control point @ end of curve
• [x y]: Ending anchor point
• Notice there's no [x1 y1], that's inferred as the mirror of previous curve's end anchor.

Q: Quadratic bezier

Q x1 y1, x y: Takes in 1 control point, which determines slope at both start and end points

• [x1 y1]: Control point for both start and end points
• [x y]: Ending anchor point

T: Continued quadratic bezier

T x y: Quadratic bezier to x y anchor point

• Control point is inferred as reflection of previous curve's anchor.

A: "Arcs"

We don't worry about those.