Objective: Learn to use the path element to draw shapes that use cubic bezier curves

Cubic Bezier curves 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 curves that you should be able to create by hand, and you should understand the syntax of cubic bezier curves  so you don't get "too confused" when looking at a large SVG <path> element.

19.1 Cubic Bezier Curve

A cubic bezier curve has two control points. One at each end of the line. (Remember the quadratic bezier curve only had one control point.) You can see this in the first drawing below.

The drawing commands for a cubic bezier curve are:

C x1 y1, x2 y2, x y Absolute positioned Cubic Bezier Curve.

c dx1 dy1, dx2 dy2, dx dy Relatively positioned Cubic Bezier Curve.

C or c sets a cubic bezier curve

x1 y1 set the start control point

x2 y2 set the end control point

x y set the end of the curve.

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

 <path d="M50 200 C10 10 390 10 350 200" />

1. The drawing point is moved to  x y=50 200
2. The C is inserted to draw a cubic curve
3. The start control point is set at x1 y2 =10 10
4. The end control point is set at x2 y2 = 390 10
5. The curve end point is set to 350 200

The cubic bezier curve creates a smooth line from the slope you established at the start of the curve to the slope at the other end.

You can place the control points anywhere to draw a required curve. Here are some examples. If you want to draw a complex cubic bezier start with this path model.

Here the control points have been set to be the same as the start and end points. It creates a straight line (black line).

d="M50 100 c0 0 100 0 100 0 c0 0 100 0 100 0 c0 0 100 0 100 0"

You can now manipulate the length and position of the line by changing the Mx y and last two x y end values. control points for various effects.

You can create multiple curves joined together. Here are three cubic curves joined together using absolute positioning. The black line coordinates create a cubic curve as a straight line. The red one coordinates create a curved line. The three colour curve is the same as the red one by translated up.

19.2 Exercise

It is unlikely that you will be creating a lot of Cubic Bezier curves by hand unless Trigonometry is your thing.

Software programs that allow the user to draw draw freehand curves tend to use Cubic Bezier curves by default as the are the most power curve creating tool in the SVG toolbox.

Try a few curves and adjusting the control points to be familiar with what happens. Very long and complicated curves are torturous to read in SVG so it is generally best to create the curve in an SVG application such as Inkscape, optimize the floating points and drop it into your drawing.

There are no exercises for this article.