An example of the SVG bezier curve path optionWritten by Richard Heyes, on 15th June 2017
If the SVG bezier curve path option is puzzling 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 "move to" 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 (a bezier curve). 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