An interactive guide to SVG paths
13 comments
·August 18, 2025hinkley
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.
dang
Same title, but different article:
An interactive guide to SVG paths - https://news.ycombinator.com/item?id=36574645 - July 2023 (39 comments)
vFunct
Would the same bezier curves be used in font rendering? And do we have GPU bezier drawing functions or shader kernels available?
simpaticoder
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.
ZFleck
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!
DrewADesign
I enjoyed the linked explainer video about the math of Bézier curves.
joshuat
NaN published a really great page about SVG paths a while ago: https://www.nan.fyi/svg-paths
null
leeoniya
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...
NoSalt
This is a fantastic article, and the interactive visuals really drive it home!
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.