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.
Curves were tough for me when I did logos. And at one point I decided one would be better off rotated, and realized a transform would be far, far easier than trying to modify the paths to run on a slant.
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.
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]
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)
Curves were tough for me when I did logos. And at one point I decided one would be better off rotated, and realized a transform would be far, far easier than trying to modify the paths to run on a slant.
I wonder if Seymour Papert's Logo programming language influenced the SVG path syntax. M and L correspond directly to "pen up/pen down" and move.
Anything by Josh is gold.
He seems like a genuinely nice person too.
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!
NaN published a really great page about SVG paths a while ago: https://www.nan.fyi/svg-paths
I enjoyed the linked explainer video about the math of Bézier curves.
Would the same bezier curves be used in font rendering? And do we have GPU bezier drawing functions or shader kernels available?
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...
This is a fantastic article, and the interactive visuals really drive it home!