Comment by nayuki

Well done on the excellent interactive visual explanation!

Having experience reading/writing SVG paths from scratch, here are a few additions for the "Lil' extras" section:

* 'H' (horizontal) is a shorthand for 'L' (line) where the y-coordinate does not change. For example, "M 12,34 H 56" is shorthand for "M 12,34 L 56,34". There is of course a lowercase relative version too, 'h', so "M 12,34 h 56" means "M 12,34 l 56,0".

* 'V' (vertical) is a shorthand for 'L' (line) where the x-coordinate does not change. For example, "M 12,34 V 56" is shorthand for "M 12,34 L 12,56". There is of course a lowercase relative version too, 'v', so "M 12,34 v 56" means "M 12,34 v 0,56".