those sounds are wonderful
Yeh it gets an upvote even just for the plop and ticks :-)
An interactive guide to SVG paths
41–49 of 49 posts
Re: An interactive guide to SVG paths
#42I'm really glad the article links to Freya's "Beauty of Bezier Curves" videos, it's genuinely one of the best math/graphics/explainer videos ever made https://youtu.be/aVwxzDHniEw
It’s worth a watch even if you aren’t interested in the subject just because it’s so well done.
Re: An interactive guide to SVG paths
#43Earlier quoted context omitted.
Were they images of pelicans on bicycles?
No, but I need to look that up now!
Re: An interactive guide to SVG paths
#44Is there a drawing program which focuses on the programmability aspect of SVG editing while allowing drawing in a natural fashion? I've done it in Inkscape, but it's a bit awkward --- there was a programming orienting tool mentioned here a while back, but it was light on the drawing aspect.
I usually use this: https://yqnn.github.io/svg-path-editor/
Re: An interactive guide to SVG paths
#45Well 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".
Re: An interactive guide to SVG paths
#46I 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…
And SVG means you can make a single file that contains everything. Pretty much irrelevant on the web, but we lack a good container format for putting a web page into a single document on disk.
I've done entire multi-layer maps in SVG, complete with clicking on the map taking you to any associated details. The part I never found a good answer for is when I wanted to use higher detail glyphs on higher resolution outputs. (Think of the sequence of lines typically used to represent stairs.)
Re: An interactive guide to SVG paths
#47I 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.
It looks completely ordinary to me--exactly the sort of thing I wrote in HP/GL2 stuff for plotters. Your only possible tool on a plotter is a pen, of course the language is based on pen movements.
Re: An interactive guide to SVG paths
#48I wonder if there's a more intuitive way to define an elliptical arc given 2 endpoints. Dimension analysis shows we need 3 parameters. The SVG spec uses rx/ry/rotation, plus a couple booleans, but maybe there's a better parameterization without booleans? For example, it could be two coordinates of a control point - if the endpoints are A and B and the control point is C, the ellipse would be tangent to AC and BC - an…
[deleted]
Re: An interactive guide to SVG paths
#49I wonder if there's a more intuitive way to define an elliptical arc given 2 endpoints. Dimension analysis shows we need 3 parameters. The SVG spec uses rx/ry/rotation, plus a couple booleans, but maybe there's a better parameterization without booleans? For example, it could be two coordinates of a control point - if the endpoints are A and B and the control point is C, the ellipse would be tangent to AC and BC - an…
The answer is YES. Get ready for a trip involving some projective 2D geometry.. If you recall the Greek's fascination with conic sections, an ellipse, hyperbola, parabola, and of course circle are all the same subject to projective 2D transformations. You can "slice through" an infinitely extending (double) cone with a plane and get conic sections, hence the name. So you could have two end points (interpolating contr…
Not sure about more intuitive, but if you want a faster way of computing the points of the arc, using mostly rational arithmetic rather than trig functions, take a look at https://observablehq.com/@jrus/svg-elliptical-arcs