# An example of the SVG bezier curve path option

*Written 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
the curve.