An example of the SVG bezier curve path option

Share RGraph:  

Summary
If the SVG bezier curve path option is flummoxing you then this page shows you how to use it.

Like the SVG quadratic curve demo this is a demonstration of the SVG bezier curve path option. Whilst the quadratic curve path option uses a total of three points the bezier curve uses 4 points - the initial moveTo and three points that you give to the C path option.

P0 P1 P2 P3

So what's happening here?


Similar to the SVG quadratic curve demo this is a demo of the SVG C path option. It's interactive so you can click and drag the points around and see the effect that it has on the curve.

Here the path is: M 100 400 C 300 50 500 50 800 400 Like the quadratic curve the first thing that's done is an M command, which is a moveTo. Then the C command (cubic bezier curve) which takes 6 arguments - 3 X/Y pairs - produces the bezier curve.

The first two points (ie 4 numbers) that are given to the C command are the two control points and the last point (ie 2 numbers) is the end point of the curve.