by vg_head on 6/7/24, 7:55 PM with 16 comments
by tobr on 6/8/24, 7:20 PM
by virtualritz on 6/10/24, 8:38 AM
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.
by krogue on 6/8/24, 7:20 PM
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.
by nico on 6/8/24, 7:34 PM
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
by Etherlord87 on 6/8/24, 10:34 PM
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.
