Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Morphing Arbitrary Paths in SVG

minus-ze.ro

Post reply on HN
Print view View original

11–17 of 17 posts

Re: Morphing Arbitrary Paths in SVG

#11

Post by vg_head »

shove wrote: post #8
Etherlord87 wrote: post #6

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 trav…

O the hours I set ablaze in supplication to the shape-tween-hinting gods (for all the good it did)

I am too young to have lived through that era, but it seems to me like tweening hints were all integrated in the editing UI? That is of course much more useful. But the scope of my post was not at all to do something better than Flash, or to integrate a full editor. It's just an explanation for one way to achieve it, leveraging what SMIL already offers.

Re: Morphing Arbitrary Paths in SVG

#12

Post by exz »

nico wrote: post #4

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: 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

Yes, there is: https://alexk111.github.io/SVG-Morpheus/

Re: Morphing Arbitrary Paths in SVG

#13

Post by cal85 »

Etherlord87 wrote: post #6

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 trav…

It’s possible to recommend another approach without being rude.

Re: Morphing Arbitrary Paths in SVG

#14

Post by nico »

exz wrote: post #12
nico wrote: post #4

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: 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

Yes, there is: https://alexk111.github.io/SVG-Morpheus/

Awesome, thank you!

Re: Morphing Arbitrary Paths in SVG

#15

Post by virtualritz »

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/

[2] https://www.borisdalstein.com/research/vac/

Re: Morphing Arbitrary Paths in SVG

#16

Post by vg_head »

virtualritz wrote: post #15

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…

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.

Re: Morphing Arbitrary Paths in SVG

#17

Post by shove »

vg_head wrote: post #11
shove wrote: post #8

Earlier quoted context omitted.

O the hours I set ablaze in supplication to the shape-tween-hinting gods (for all the good it did)

I am too young to have lived through that era, but it seems to me like tweening hints were all integrated in the editing UI? That is of course much more useful. But the scope of my post was not at all to do something better than Flash, or to integrate a full editor. It's just an explanation for one way to achieve it, leveraging what SMIL already offers.

Yeah, they were in the editor and buggy as hell and you ran an increasing risk of crashing the tool the more of them you used. Also IIRC, they were indexed by letter of the alphabet and everything became impossible > 26.
Post reply on HN