Morphing Arbitrary Paths in SVG
minus-ze.ro
Morphing Arbitrary Paths in SVG
1–10 of 17 posts
Re: Morphing Arbitrary Paths in SVG
#2Nice, fancy approach. The stupid simple approach I’ve used is to sample each path with path.getPointAtLength() at an appropriate resolution, and use that to approximate the paths with many short straight lines segments which are trivial to interpolate between.
Re: Morphing Arbitrary Paths in SVG
#3The astral renderer released as open source on https://github.com/InVisionApp/astral-renderer does all sorts of path morphing.
It is a C++ library, builds for native (MacOS, Linux and MS-Windows via msys2/ming2 and WebAssembly). It also included a some-what user hostile demo to allow one to make their own animated paths (and save them and load them).
As an example try running
./create_animated_path-release load demo_data/animated_path/example_insane.bin
after you build it for release.
If you download the SVG-Tiger (say from https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscr...) you can see it animate an SVG to its reflection too:
./svg-release file ./Ghostscript_Tiger.svg reflect_direction_x 1 reflect_direction_y 1
The library is not really worked on at all since I (the author) left InvisionApp quite some time ago; that and InvisionApp announced that they are shutting down by the end of 2024.
Because it targeted WebGL2 (which is jut GLES 3.0) it could not use compute so some portions of how path filling are handled become CPU bound instead of GPU bound once the GPU is too powerful; a Mac-Mini with an M1 was generally the sweet spot.
Re: Morphing Arbitrary Paths in SVG
#4Very cool effect
Is there a basic JS library to do something like this by giving it two image paths via a property of an html tag? (and then the library automatically replacing the html element with an animation)
For example:
default content to replace with animation
Extra bonus point if it works on the background image of an element, so that a whole page might have an animated svg background
Re: Morphing Arbitrary Paths in SVG
#5Nice, fancy approach. The stupid simple approach I’ve used is to sample each path with path.getPointAtLength() at an appropriate resolution, and use that to approximate the paths with many short straight lines segments which are trivial to interpolate between.
Microsoft’s WPF does this and then applies a bezier recovery algorithm to (approximately) get the curves back.
Re: Morphing Arbitrary Paths in SVG
#6no, no, no, no, no, no....
Look at the heart to star morphing. How can you call it a "very cool effect"?! It's so damn ugly. It existed back in the day of Macromedia Flash 4 (maybe earlier), called shape tweening. Except there, you could use tween hints to control the transition.
Try this instead: look at the pairs of nearest points, take a heap sort of like 4 best matching pairs of points, and from those points traverse the curves, resampling the paths with less resolution. Now instead of interpolating positions, interpolate angles. This way the curves will naturally deform, instead of line segments passing through each-other.
Re: Morphing Arbitrary Paths in SVG
#7no, no, no, no, no, no.... Look at the heart to star morphing. How can you call it a "very cool effect"?! It's so damn ugly. It existed back in the day of Macromedia Flash 4 (maybe earlier), called shape tweening. Except there, you could use tween hints to control the transition. Try this instead: look at the pairs of nearest points, take a heap sort of like 4 best matching pairs of points, and from those points trav…
Always open to suggestions! I don't claim this to be any kind of novel method, or even a "good method". It's just an explanation of one way to do it, which is (IMO) relatively easy to understand, and implement.
When researching about this, I didn’t find a lot of writing. Macromedia definitely had this a long time ago, but I don't think you can look up how it was implemented. Not to my knowledge, at least.
Do you have an example of the algorithm you describe? Or a more detailed explanation? I don't quite get how it would work from what you've described.
Re: Morphing Arbitrary Paths in SVG
#8no, no, no, no, no, no.... Look at the heart to star morphing. How can you call it a "very cool effect"?! It's so damn ugly. It existed back in the day of Macromedia Flash 4 (maybe earlier), called shape tweening. Except there, you could use tween hints to control the transition. Try this instead: look at the pairs of nearest points, take a heap sort of like 4 best matching pairs of points, and from those points trav…
O the hours I set ablaze in supplication to the shape-tween-hinting gods (for all the good it did)
Re: Morphing Arbitrary Paths in SVG
#9no, no, no, no, no, no.... Look at the heart to star morphing. How can you call it a "very cool effect"?! It's so damn ugly. It existed back in the day of Macromedia Flash 4 (maybe earlier), called shape tweening. Except there, you could use tween hints to control the transition. Try this instead: look at the pairs of nearest points, take a heap sort of like 4 best matching pairs of points, and from those points trav…
Always open to suggestions! I don't claim this to be any kind of novel method, or even a "good method". It's just an explanation of one way to do it, which is (IMO) relatively easy to understand, and implement. When researching about this, I didn’t find a lot of writing. Macromedia definitely had this a long time ago, but I don't think you can look up how it was implemented. Not to my knowledge, at least. Do you have…
Re: Morphing Arbitrary Paths in SVG
#10Earlier quoted context omitted.
Always open to suggestions! I don't claim this to be any kind of novel method, or even a "good method". It's just an explanation of one way to do it, which is (IMO) relatively easy to understand, and implement. When researching about this, I didn’t find a lot of writing. Macromedia definitely had this a long time ago, but I don't think you can look up how it was implemented. Not to my knowledge, at least. Do you have…
https://git.savannah.gnu.org/cgit/gnash.git/tree/libcore/swf...
I haven't looked too in depth into it, but it looks closer to what I described? It doesn’t look like the method the other commenter was describing.
Also, keep in mind that I did not mean to implement something better than what Flash did. It's merely an extension to the kind of morphing the browsers already offer.