An example of the SVG quadratic curve path option

Written by Richard Heyes, on 13th June 2017

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

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.

P0 P1 P2

So what's happening here?

I suppose you'll want to know! I should explain - the path is shown in the text box above - let's take a look at this path: M 100 400 Q 400 50 800 400. The first thing that's done is a "move to" - followed by two numbers which are used as the pair 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.