Objective: Learn to use the path element to draw shapes that use bezier curves. First Quadratic Bezier Curves.

There are two types of bezier curves: Quadratic and Cubic. These are the most complicated shapes to draw and will normally be done using an SVG editing tool such as Inkscape or SVG Edit if you are drawing a complex illustration.

However there are basic bezier curves such as parabolas,  cubic function curves and sinewaves, etc. that you should be able to create by hand. We will do them one by one.

18.1 Quadratic Bezier Curve

The drawing commands for a quadratic bezier curves are:

Q x1 y1, x y  (position absolute)

q dx1 dy1, dx dy (position relative)

Q defines that a quadratic bezier curve is to be drawn

x1 y1 sets the control point

x y sets the end of the curve.

Here is a real example with some construction points to show the curve control point.

 <path d="M0 200 Q200 0 400 200" />

The drawing point is moved to  x y = 0 200

The Q is inserted to define a quadratic curve

The control point is set at x y =200 0

The curve end point is set to 400 200

(The blue construction lines have been added to help understand the coordinate positioning.)

Exercise

Take time to adjust all the points to see what happens. You can take the control point out of the viewBox. Try 200,-200.

At least try the following control point coordinates to see how the curve is changes. (You can delete the construction lines  to avoid confusion.)

Copy and paste the curve and then make the following control point adjustments.

0 0

400 0

200 -200

18.2 Joining Quadratic Bezier Curves

Now we need to see what happens when we joint multiple different Quadratic Bezier curves together.

<path d="M0 100 Q100 0 200 100 Q250 200 300 100 " />

Here you can see two quadratic curves joined together. The second one starts where the first one ends.

The second control point has been deliberately placed so the curves do not blend smoothly. That may be a drawing requirement but generally smooth transitions are required. That is done with the T command.

Use T to join quadratic curves smoothly

T x y Allows multiple Quadratic curves to be joined together with only  the x y end point specified and all curves will join smoothly.

Here is an example (green) with one T:

<path d="M0 100 Q50  0, 100 100 T200 100" />

And here is an example (red) with three T's

<path d="M0 130 Q50 0, 100 130 T200 130 T300 130 T400 130" />

The blue line shows T points that are placed with different vertical and horizontal coordinates.

<path d="M0 50 Q50 0, 50 130 T80 120 T200 80 T300 100 T350 80" />

This shows that complex random curves can be created. However it is unlikely that you will draw these by hand a they are very difficult to plan.

18.3 SVG Editor Let's Draw something

Here are some nice hills fading into the distance with a simple quadratic curve set.

18.4 Exercises