# Draw Bezier curve path with SVG

Go to solution Solved by GreenSock,

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

I have a path for my animation. This path is Bezier curve which can be plotted by arbitrary number of points:

```bezier:{
curviness:1.25,
values:[
{x:100, y:250},
{x:300, y:0},
/* ... N more points ... */
{x:500, y:400},
{x:200, y:100}
]
}```

I want depict this path with SVG <path/> element.

Path element uses M, C, Q, T and other parameters for plotting curve, for example:

`<path d="M100,200 C100,100 250,100 250,200 S400,300 400,200" />`

How can I convert my points to the terms of parameters used in SVG path?

##### Share on other sites

I can show how to do this later.

Quick question. Is the SVG going to be part of the finished product, or are you just trying to visualize it for testing purposes.

• 2
##### Share on other sites

Great!

And yes, it will be a part of the finished product.

• 1
##### Share on other sites

• Solution

If I understand your objective correctly, you can use the BezierPlugin.bezierThrough() method and construct the string accordingly like this:

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

```var values = [{x:0, y:0}, {x:100, y:100}, {x:50, y:200}, {x:40, y:30}, {x:200, y:50}];
var curviness = 1.25;

TweenLite.set("#path", {strokeWidth:5, stroke:"red", fill:"none"});

var data = BezierPlugin.bezierThrough(values, curviness);
var d = "M" + data.x[0].a + "," + data.y[0].a + " C" + segmentToString(data.x[0], data.y[0]); //the <path> data
for (var i = 1; i < data.x.length; i++) {
d += "," + segmentToString(data.x[i], data.y[i]);
}
TweenLite.set("#path", {attr:{d:d}});
TweenLite.to("#circle", 5, {bezier:{values:values, curviness:curviness}, ease:Power1.easeInOut})

//this just helps consolidate some of the code, and ensure that the values are clipped to 2 decimal places. It could be done in a more performant way, avoiding toFixed(2), but my goal here was to keep things simple:
function segmentToString(x, y) {
return [x.b.toFixed(2), y.b.toFixed(2), x.c.toFixed(2), y.c.toFixed(2), x.d.toFixed(2), y.d.toFixed(2)].join(",");
}```

Docs for BezierPlugin.bezierThrough(): http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/bezierThrough/

Does that help?

• 4
##### Share on other sites

Yes, this is it! Thanks!

##### Share on other sites

Well Jack beat me to it, but they all can be done like that. The "soft" type are just quadratic Beziers.

@Jack

I've been meaning to ask you what the "thru" type is based off of? Is it this...

##### Share on other sites

@OSUblake, no, it's not really based off of that. In my tests, that [relatively common] algorithm looked a little funky in some situations (especially when there's one anchor super close, and another very far away) so I crafted my own that I think looks more natural.

##### Share on other sites

I've always assumed it was based off of that because of Rodrigo's

See the Pen kjmDo by rhernando (@rhernando) on CodePen

that shows how to create circular motion. That's pretty crazy to hear that you came up with your own solution. It takes mathematicians years to come up with a good way to fit a curve.

I was curious to see how your curves would compare to spiro curves, so I dropped it into one of my older demos. It can't handle long segments like spiro, but if you place the points close together, it does a really good job of following the spiro path. Probably the best I've ever seen. The blue curve is yours...

You can test it out here. Using a tension of 1.5 matches up the best.

See the Pen 7428401b65c8bf4b7e5f74e6baf211bc by osublake (@osublake) on CodePen

• 1