Loved this. Thought it was perfect for my skill level (I know what an .svg is; that's about it). I think what I learned will actually come in handy the next time I'm trying to adjust / optimize an icon.

I really liked the sound effects! Spent perhaps too long just picking up and dragging stuff.

Thanks!

Anything by Josh is gold.

This is a fantastic article, and the interactive visuals really drive it home!

heh, im currently working on an svg pathstring to canvs2d command compiler [1] and had to dive into this topic last week, including converting arc commands from centerpoint parameterization to endpoint parameterization [2]

[1] https://github.com/leeoniya/uMarks (WIP!)

[2] https://www.w3.org/TR/SVG/implnote.html#ArcConversionCenterT...

NaN published a really great page about SVG paths a while ago: https://www.nan.fyi/svg-paths

I really could have used this last year when I was making a web adventure game with randomly created map. SVG is one of those frontend technologies that seem pointless until you really need them. Dynamically creating SVG in response to user actions in the game provided a very nice graphical representation of the adventure.

Unlike the author of this piece, I found the lower-case relative commands extremely useful for creating shapes like arrows (or in my case, sectors of space) that can be translated around later.

Same title, but different article:

An interactive guide to SVG paths - https://news.ycombinator.com/item?id=36574645 - July 2023 (39 comments)

I enjoyed the linked explainer video about the math of Bézier curves.