Jump to content


SVG Shape Morphing

Recommended Posts

I know this has been asked in the past and that you need the SnapPlugin to morph svg paths.  But I though I saw a tweet the other day between GreenSock and Sara Soueidan about this being include in v1.18 but it was undocumented.  Maybe I'm crazy.  Is there now a way to morph shapes with just the GSAP library? Ex. shapes:


<path d="m 14.201849,1.5439136 0,4.2992953 -8.2513192,8.6128771 -4.1523786,-4.022205 0,-4.2992963 4.1523786,4.0222073 z" />
<path d="M 3,3 7.5455556,3 13,7.9995 7.5455556,13 3,13 8.4544444,7.9995 3,3.0000001 Z" />


Link to comment
Share on other sites

Hi bigbeats01 :)


Yep , with 1.18.0 you can tween complex string-based values , but there's a point , you should to apply path/polygon with same point type / points count  , otherwise you will have a jump in your tween .


pls check this out : 

See the Pen bVVqmj by MAW (@MAW) on CodePen

  • Like 5
Link to comment
Share on other sites

Nice Job Diaco! .. Using your great example as inspiration using TimelineMax with new 1.18.0 .. the triangle is tricky, but fun stuff


See the Pen jbbmXb by jonathan (@jonathan) on CodePen


Im gonna try with different svg graphical elements. The awesome thing is being able too morph SVG elements in IE.. since SMIL animation does not allow this. But GSAP does!!!



  • Like 4
Link to comment
Share on other sites

With a little extra work you can fill in those missing values. Depending on how you want the morph to look, you could either repeat all the xy values for a command, or use one pair of xy values, presumably the last pair. I repeated all the xy values which created a pretty interesting effect.


See the Pen meepJE by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

  • 4 weeks later...

As I can see from this video:


the Greensock MorphSVG plugin is implementing the morphing algorithm wrong. If you interpolate the curves only, it will give rise to unwanted intersections and produce an unintuitive tween, especially for closed shapes. At the moment the plugin produces ugly self-intersections during the tween morphing animations. A correct approach is to find a correspondence between the interiors of the shapes and interpolate that. If you consider the two shapes as piecewise linear, you can triangulate both and find a correspondence b/w the triangles and eventually interpolate the triangles.

You can add points at close intervals on the curve to make it 'almost' piecewise linear. The you do the same with the destination curve, until both origin and destination have the same number of points. 

Then any standard triangulation algorithm can be applied to the enhanced set of points. For best results you can use “Constrained Delaunay Triangulation”, or “Sorted Ear Clipping” (details can be found here: http://www.cosy.sbg.ac.at/~held/projects/triang/triang.html and here: http://www.geom.uiuc.edu/~samuelp/del_project.html ). The latter is faster and easier to implement.

An example of triangulation implementation can be seen here: https://github.com/mattdesl/svg-mesh-3d and here: https://github.com/mattdesl/svg-path-contours .

Once you have the triangulated curve, then you need to choose the best possible triangle (the one whose angles are not differing much) at each step to interpolate between the points.

A good paper on the subject is this: “Intersection-Free Morphing of Planar Graphs” ( http://ftp.cs.arizona.edu/~kobourov/gmorph.pdf ).

Another paper, more advanced algorithm because it can morph even self-overlapping curves, is this one: “Tweening Boundary Curves of Non-simple Immersions of a Disk” ( http://www.ics.uci.edu/~gopi/SamplePubs/Tweening.pdf ).

Here are some videos of the latter morphing algorithm at work: 



If you decide to do morphing, please do it correctly. Thanks!


Link to comment
Share on other sites

Hello Fmuaddib, I don't really understand your point since the video you pointed to has a big red bar at the beginning displaying that MorphSVGPlugin is in private beta. Official release coming soon. So I'm unsure how you can point to various PDF's and say that its being done wrong without even seeing the final source code when it is still in private beta. So i really don't get or understand your point(s), since it is based off of incomplete data, no source code, and no examples of the MorphSVGPlugin in its final release, still in private beta! .. borderliine trolling :) Very confusing  :blink:

  • Like 2
Link to comment
Share on other sites

Hi Fmuaaddib,


For the record, we have seen your multiple complaints about our un-released product on youtube, github, and twitter. It would be greatly appreciated if you could take a breath until we have a chance to formally respond. 


We released our beta to hundreds of our customers and have had nothing but stellar reviews. Literally, some of the best animators in the world have been using it with amazing results. 


We will certainly review your concerns and respond. I have no doubt that you have provided useful information. Thanks for taking the time.

  • Like 6
Link to comment
Share on other sites

Hi @Fmuaddib,


Thanks for those links! I was looking into calculating shape contours of SVGs and have been looking for something a little more robust than Poly-K.

Link to comment
Share on other sites

I've been looking into Delaunay triangulation for the past couple of hours, and from what I can tell, it seems to be better suited for paths that are closed and can be easily approximated by a polygon or some other type of mesh.


I haven't tested this, but it seems like a really complicated SVG with a lot of variation, as in different colors, strokes, paths, gradients, filters, etc. might not work work that well. Again, I could be wrong as I haven't tested a complex SVG using this method, but right now it doesn't seem like a panacea to handle all different types of shape morphing. 


I did create a demo some time ago that I think would work great with the methods you presented. I'll try to find some time to add them in later, but as you can see the shape morphing is not that great... although that's really not the point of the demo. It's to reduce the number of points in a polyline.


See the Pen a1a42a3ee8550d6b7a0fb29c6a5b1946 by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Fmuaddib, I really appreciate your passion for getting this morphing thing "right". I'm not sure the methods you're prescribing are ideal, though. Some solutions are really impressive academically/theoretically but in practical reality they just aren't very feasible or intuitive. We place a high priority on performance and it looked like the "Constrained Delaunay Triangulation" would be exponentially more expensive processing-wise and probably file size-wise too. I'm just not sure it's worth the high price, especially because:


  1. We already implement an algorithm that seems to do a decent job of avoiding ugly overlaps (though not always)

  2. We provide a "shapeIndex" property that gives you control of where the points map so that you can manually override things if the morphing looks weird or generates overlaps that you don't like. 

  3. Most people would rather have smooth animation with an occasional brief overlap than a janky animation that avoids them by contorting in different ways with a fancier algorithm. 


The examples you linked to, while very impressive, gave wildly different morphs than I would have intuitively expected. The in-between shapes might be considered desirable by some...or really weird even though they technically didn't have any overlaps. I'm just not sure it's fair to call our method "wrong". 


I think it left a bit of a sour taste in my mouth when you went on such a rampage posting on so many social media outlets, github, our own forums, etc. and tweeted to other fans of ours that we're doing it "wrong" and then went to another open source library author, insulted our work and asked them to copy what we're doing (but in the "right" way). 


We are only hearing rave reviews of MorphSVGPlugin thus far from the people who have tried it. But if we start hearing a lot of complaints about things looking wrong/weird/undesirable, we'll certainly try to resolve that somehow and perhaps the triangulation stuff would be the only decent option but I'm still pretty concerned about the CPU and file size price. 


Thanks again for so passionately pushing for improvements in our work. I really do appreciate it when people offer ideas for making our tools better. 

  • Like 3
Link to comment
Share on other sites

I messed around with some of the triangulation methods, but wasn't able to get good results. I now see on the svg-mesh-3d GitHub page that it says it is best suited for silhouettes, like font icons. I tried it out on my rope texture, and the results weren't smooth (top picture). The bottom picture I used the MorphSVG plugin.




I know you can change the tolerance, but that means more polygons. If you turn it up too much you might end up with the great state of Minnesota, which I don't think would be very performant for an animation.



  • Like 1
Link to comment
Share on other sites

wow, i think i its safe to safe the animation capabilities of greensockjs are moving at an accelerated pace! its

starting to remind me of flash as years ago. Congrats guys. :) and in regards to the guy "went to another open source library author, insulted our work and asked them to copy what we're doing (but in the "right" way)." 


I guess you know you you are doing the right not just when you have a lot of fans but when you have a lot of attention from critics. wow, lol.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.