Challenge: Convert SVG path to Bezier anchor and control points

[Jonathan 5,392 Likes (Superhero)]

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 

[lifvic 3 Likes (Newbie)]

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

[Carl 11,180 Likes (Superhero)]

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

http://codepen.io/GreenSock/pen/dXLmYo

 

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

[lifvic 3 Likes (Newbie)]

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!

[GreenSock 18,597 Likes (Superhero)]

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

http://codepen.io/anon/pen/akxKXX?editors=1010

 

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? 

[lifvic 3 Likes (Newbie)]

Thanks so much! Yes it does clear things up!

[krzszzz 0 Likes (Newbie)]

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

 

[GreenSock 18,597 Likes (Superhero)]

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! 

[krzszzz 0 Likes (Newbie)]

@GreenSock yea, this is only for simple cubic-beziers 

[mintcar 0 Likes (Newbie)]

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.

[chrisgannon 226 Likes (Specialist)]

Old post but here's a useful link:

 

https://path2bezier.netlify.com/

 

Oops just noticed it's mentioned above! Must be good then...