Jump to content
Search Community

Challenge: Convert SVG path to Bezier anchor and control points

Carl test
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 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

  • 1 year later...

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.
  • Create New...