# An example of the SVG bezier curve path option

*Posted on 15th June 2017*

**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.

# 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.