Jump to content


Challenge: Convert SVG path to Bezier anchor and control points

Moderator Tag
Go to solution Solved by jamiejefferson,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

It looks like your <circle> with id #gov element is set for cx="650.06" and cy="115.95" .. so that is why the circle doesn't animate in the right place. I would suggest you tweak those values so they line up with the way you want it to animate in relation to the position of your arc  :)

Link to comment
Share on other sites

Hi Jonathan, 


Thanks for your input! :) I somehow got the cx and cy closer to the starting point, but it seems like the motion path is far far away, so the image always jumps to start the animation.


See the Pen NAmwyz by lifvic (@lifvic) on CodePen

Link to comment
Share on other sites

i changed the css of .cls-7 to have fill:red

i also found the <circle> inside #gov and gave it cx:0 cy:0. (it was previously at -650, 800 or something)


I'm pretty sure that thing is messing up a bunch of measurements. 


no javascript, just the svg



see the red circle? I think that is to blame.

Link to comment
Share on other sites

Hi Carl,


I removed the red circle and the whole thing is still messed up. I think the red circle forced #gov to be a giant square and it rotated along the path that way. But I don't understand why #gov icon didn't move even after the red circle is removed. 


Thanks so much!

Link to comment
Share on other sites

Here's a fork that shows how to do it:



There were some typos in the original, and the key problem was that you didn't tell the pathDataToBezier() to align:"#gov" (so that effectively it'll make #gov move to where the path is rather than using those absolute coordinates). Notice I also used offsetX and offsetY to adjust for the width/height of the element itself. See the docs for more info about those parameters: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/


Does that clear things up? 

  • Like 3
Link to comment
Share on other sites

Thanks so much! Yes it does clear things up!

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

I know the thread is a bit old but recently was working on some animation that needed to follow bezier curve.

Was googling for solutions, found this topic & thought I share the thing I made. :)


Here's my approach:


See the Pen zaoyam by ccrch (@ccrch) on CodePen


Link to comment
Share on other sites

Thanks for sharing your solution, @krzszzz. Seems to work okay in that example, but if I read it correctly, that'd only work if your <path> elements use cubic bezier data exclusively, but they'll often use many other commands. And sometimes absolute and relative commands are used, but the example you provided would only work if they're all absolute, right? The MorphSVGPlugin solution should work for any and all <path> data. 


Anyway, thanks again for sharing! 

Link to comment
Share on other sites

  • 9 months later...

I'm going to add something to this old topic too.


I recently found myself in need of converting paths for use with the bezier plugin and found this thread. But I didn't want to add Snap or Raphaël as a dependency in my project, so none of the solutions in here helped me at that time. What I really wanted was a simple online tool for making a quick conversion without installing anything. And since I couldn't find one I made it: path2bezier.netlify.com


I used the code in

See the Pen ecdfb83c70724638f83376a0cfad6b26 by GreenSock (@GreenSock) on CodePen

. You can look at the readme for more details.


This was made pretty quickly and it hasn't been tested at all, basically. But it seems to work and I will be using it myself, so kinks should get worked out eventually. Thankful for any issues reported.

Link to comment
Share on other sites

  • 8 months later...

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.