An interactive guide to SVG paths
joshwcomeau.com
An interactive guide to SVG paths
1–10 of 49 posts
Re: An interactive guide to SVG paths
#2Loved 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!
Re: An interactive guide to SVG paths
#3Anything by Josh is gold.
Re: An interactive guide to SVG paths
#4This is a fantastic article, and the interactive visuals really drive it home!
Re: An interactive guide to SVG paths
#5heh, 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...
Re: An interactive guide to SVG paths
#6NaN published a really great page about SVG paths a while ago: https://www.nan.fyi/svg-paths
Re: An interactive guide to SVG paths
#7I 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.
Re: An interactive guide to SVG paths
#8Anything by Josh is gold.
He seems like a genuinely nice person too.
Re: An interactive guide to SVG paths
#9[deleted]
Re: An interactive guide to SVG paths
#10Same title, but different article:
An interactive guide to SVG paths - https://news.ycombinator.com/item?id=36574645 - July 2023 (39 comments)