4 ms·

Morphing Arbitrary Paths in SVG

87 points by vg_head 2y ago

tobr 2y ago
Nice, 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.
- jahewson 2y ago
  Microsoft’s WPF does this and then applies a bezier recovery algorithm to (approximately) get the curves back.
krogue 2y ago
The astral renderer released as open source on https://github.com/InVisionApp/astral-renderer 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/Ghostscript_Tiger.svg 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.
nico 2y ago
Very 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: <div x-img-1=“img1.svg” x-img-2=“img2.svt”>default content to replace with animation</div> Extra bonus point if it works on the background image of an element, so that a whole page might have an animated svg background
- exz 2y ago
  Yes, there is: https://alexk111.github.io/SVG-Morpheus/ https://alexk111.github.io/SVG-Morpheus/
  - nico 2y ago
    Awesome, thank you!
Etherlord87 2y ago
no, 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.
- vg_head 2y ago
  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.
  - tadfisher 2y ago
    https://git.savannah.gnu.org/cgit/gnash.git/tree/libcore/swf/ShapeRecord.cpp#n132 https://git.savannah.gnu.org/cgit/gnash.git/tree/libcore/swf...
    - vg_head 2y ago
      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.
- shove 2y ago
  O the hours I set ablaze in supplication to the shape-tween-hinting gods (for all the good it did)
virtualritz 2y ago
Check out VGC software's VGC Animation[1]. The author, Boris Dalstein, published a novel algorithm for shape morphing at SIGGRAPH 2014, using vector animation complexes[2], which is the basis for this software. AFAIK this is (still) state of the art for this stuff today. I.e. I haven't seen anything better if you do any sort of 2D animation based on vector graphics. Topology is more or less not a concern any more. [1] https://www.vgc.io/ https://www.vgc.io/ [2] https://www.borisdalstein.com/research/vac/ https://www.borisdalstein.com/research/vac/
- vg_head 2y ago
  I've been following VGC for some time now, and I definitely think it's the coolest project of its kind right now! I sincerely hope it will be widely used.

87 points by vg_head 2y ago

tobr 2y ago

Nice, 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.

jahewson 2y ago
Microsoft’s WPF does this and then applies a bezier recovery algorithm to (approximately) get the curves back.

krogue 2y ago

The astral renderer released as open source on https://github.com/InVisionApp/astral-renderer 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/Ghostscript_Tiger.svg 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.

nico 2y ago

Very 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: <div x-img-1=“img1.svg” x-img-2=“img2.svt”>default content to replace with animation</div> Extra bonus point if it works on the background image of an element, so that a whole page might have an animated svg background

exz 2y ago
Yes, there is: https://alexk111.github.io/SVG-Morpheus/ https://alexk111.github.io/SVG-Morpheus/
- nico 2y ago
  Awesome, thank you!

Etherlord87 2y ago

no, 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.

vg_head 2y ago
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.
- tadfisher 2y ago
  https://git.savannah.gnu.org/cgit/gnash.git/tree/libcore/swf/ShapeRecord.cpp#n132 https://git.savannah.gnu.org/cgit/gnash.git/tree/libcore/swf...
  - vg_head 2y ago
    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.
shove 2y ago
O the hours I set ablaze in supplication to the shape-tween-hinting gods (for all the good it did)

virtualritz 2y ago

Check out VGC software's VGC Animation[1]. The author, Boris Dalstein, published a novel algorithm for shape morphing at SIGGRAPH 2014, using vector animation complexes[2], which is the basis for this software. AFAIK this is (still) state of the art for this stuff today. I.e. I haven't seen anything better if you do any sort of 2D animation based on vector graphics. Topology is more or less not a concern any more. [1] https://www.vgc.io/ https://www.vgc.io/ [2] https://www.borisdalstein.com/research/vac/ https://www.borisdalstein.com/research/vac/

vg_head 2y ago
I've been following VGC for some time now, and I definitely think it's the coolest project of its kind right now! I sincerely hope it will be widely used.