How to find the bezier coordinates

[valente97]

How would i calculate the bezier path of this shape? I want to have a circle which follows this curve but I don't know how to find the numbers to use for the bezier path. I included a link to the codepen so you can see what it is I'm trying to do with the SVG.

 

 

Thanks in advance for the help

See the Pen dpJxYP by anon (@anon) on CodePen

[Jonathan]

Hello valente97

 

You can check out the pathDataToBezier special method that is part of the MorphSVGPlugin.

 

pathDataToBezier: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/

• Converts SVG <path> data into an array of cubic Bezier points that can be fed directly into a BezierPlugin-based tween.

 

Taken from the MorphSVGPlugin Docs page:

• MorphSVGPlugin is a bonus plugin for all Club GreenSock members. It's our way of saying "Thank you" to those that are fueling innovation at GreenSock. To download DrawSVGPlugin, just log into your account dashboard and grab the latest version of GSAP.
  
  Try MorphSVGPlugin for free on Codepen!
  
  There's a special [fully-functional] version of DrawSVGPlugin that we link to in our demos in our MorphSVGPlugin Collection on CodePen, so feel free to fork any of them, add your own SVG graphics, and take MorphSVGPlugin for a spin. Codepen is a fantastic way to experiment. We highly recommend it. Note: the special version of the plugin will only work on the Codepen domain.
  
  To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.

Resources:

pathDataToBezier Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/

MorphSVGPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/