<path> can draw anything.

<rect>, <circle>, all that stuff.

``````<svg viewBox="0 0 142.13 134.27">

<path d="M96.33,23.07L118,66.9l48.36,7-35,34.11,8.26,48.17L96.33,133.46,53.08,156.21,61.34,108l-35-34.11,48.36-7s0.34-20.71,12.82-26S96.33,23.07,96.33,23.07Z">

</svg>``````
``````<svg viewBox="0 0 142.13 134.27">

<path d="

M 96,23
L 118,66.9l48.36,7-35,34.11,8.26,48.17
L 96.33,133.46,53.08,156.21,61.34,108l-35-34.11,48.36-7
s 0.34-20.71,12.82-26
S 96.33,23.07,96.33,23.07
Z

">

</svg>``````

So it's like LETTERS then NUMBERS.

The control... let's call it a VIRTUAL PEN.

You can lift it up and set it down.

You can move it all around.

l

Lower the pen and draw a straight line relatively these distances

M (absolute x,y coordinates)

m (relative x,y distances)

L (absolute x,y coordinates)

l (relative x,y distances)

H (single absolute X coordinate)

h (relative X distance)

V (single absolute Y coordinate)

v (relative Y distance)

Z ends the path.

It's optional.

If you leave it off, the path can be an open-ended path (like a line).

If you add it, a straight line will be drawn from the last place the pen ended up and where the pen started.

A path might have multiple paths...

Turns out curves are kinda complicated.

There are five kinds in three groups:

Cubic Bézier (C, c, S, s)

Quadratic Bézier (Q, q, T, t)

Elliptical arc (A, a)

I think the easiest one to understand is Q

Because it involves actually defining the final coordinate.

Q 60,100 50,50

https://www.sitepoint.com/closer-look-svg-path-data/