SVGs explained

Below is explanation of path command of svgs

SVG path has 18 commands

Open questions

what scale does the coord system use? Is 300 300px?

Comma vs space for delims?

Move - M,m

Mx,y - move to abs coords mx,y - move rel pos

M213.1,6.7 Pick up the pen and move it to the exact location 213.1, 6.7

The UPPERCASE version is the absolute version and the lowercase is the relative version.

Draw Line - L,l

Draw Vertical - V,v

Draw Horizontal - H,h

Z,z Close the path

draws a line back to the start

C Draw a bezier curve

More reading

https://css-tricks.com/svg-path-syntax-illustrated-guide/

Tooling

https://svg-path-visualizer.netlify.app/