# An example of the SVG quadratic curve path option

*Posted on 13th June 2017*

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

**Edit:**
Originally this article talked about bezier curves - but it's actually
quadratic curves.

This is an interactive example of the SVG quadratic curve path option. You can drag the points around and see the effect that it has on the curve. The path is shown in the text box underneath the SVG tag.

# So what's happening here?

I suppose you'll want to know. I guess I should explain a bit. Ok the path
is shown in the text box above - lets take a look at this path:
*M 100 400 Q 400 50 800 400*. The first thing that's done
is a moveTo - followed by two numbers which are used as the set
of coordinates to move to.

Then comes the good bit - a **Q** option which
draws a quadratic curve. This type of curve takes 4 numbers as arguments.
The first two are used as coordinates for the control point (P1 in the
example above).

And the last two are used as coordinates for the end point of the curve - P2 in the example above.

As you can see the curve doesn't pass through the center point (P1) - it's just a control point that defines the curve.