An example of the SVG bezier curve path optionWritten by Richard Heyes, on 15th June 2017
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.
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.