The Bézier curve is a popular way to draw curves in graphic editors such as GIMP and Inkscape. A curve of degree n is defined using n+1 points, where the first and last are the start and end points of the curve, respectively, and the rest are control points.

For example:

The curve in the image above is a cubic Bézier curve. It has start and end points (filled with blue) and two control points (with no fill).

Each control point is attached by a straight line to a start or an end point, for a reason:

- The control points allows the user to control the curve intuitively.
- The straight line between the start(or end) point and its control point is tangent to the curve at the start(or end) point.

## The Definition

A Bézier curve is defined as the collection of points that are the result of the function

B(t) for every t in [0,1].

A linear Bézier is simply a straight line between to points P_{0} and P_{1}. The function is:

(1 – t)B_{P0} + tB_{P1}

For n>1, Be P_{0}, P_{1} … P_{n} the list of the curve’s points. Then the curve’s function is defined as

B_{P0P1…Pn}(t) = (t – 1)B_{P0P1…Pn-1}(t) + tB_{P1P2…Pn}(t)

Or, in its explicit form:

(Not a very precise definition because 0^{0} is not a number, so use the value 1 instead.)

This equation can be proved easily using the Pascal triangle.

From the explicit definition, you can see that the translation is done by adding the same coordinates to which of the curves start, end and control points.

because:

Rotations and translations are done by a transform matrix. So, if T is a transform matrix:

TB_{P1,P2,…Pn} = B_{TP1,TP2,…TPn}

## About Tangents

Now, in a Bézier curve, B_{P0P1…Pn}(t), The line P_{0} – P_{1} is tangent to the curve at point P_{0}, and P_{n} – P_{n-1} is tangent to the curve at point P_{n}

To prove this we’ll have to show that the derivative of a Bézier curve of degree n at the start and end points is a non-zero scalar multiplied by the difference between P_{1} and P_{0}, and between P_{n} and P_{n-1}.

That scalar is `n`

.

For n=1;

B_{P0,P1} = (1 – t)P_{0} + tP_{1}

Let’s derive:

B’_{P0,P1} = -P_{0} + P_{1}

**Good!**

Let’s assume it’s correct for n, and prove for n+1

B_{P0,P1…,Pn+1}(t) = (1 – t)B_{P0,P1…,Pn}(t) + tB_{P1,P2…,Pn+1}(t)

Let’s derive:

B’_{P0,P1…,Pn+1}(t) = -B_{P0,P1…,Pn}(t) + (1-t)B’_{P0,P1…,Pn}(t) + B_{P1,P2…,Pn+1}(t) + tB’_{P1,P2…,Pn+1}(t)

Now, to get the tangent to the curve at p_{0}, let;s assign t=0:

B’_{P0,P1…,Pn+1}(0) = -B_{P0,P1…,Pn}(0) + B’_{P0,P1…,Pn}(0) + B_{P1,P2…,Pn+1}(0) =

= – P_{0} + n(P_{1} – P_{0}) + P_{1} = (n+1)(P_{1} – P_{0})

**Good!**

Now, to get the tangent to the curve at p_{0}, let;s assign t=1:

B’_{P0,P1…,Pn+1}(1) = -B_{P0,P1…,Pn}(1) + B_{P1,P2…,Pn+1}(1) + B’_{P1,P2…,Pn+1}(1) =

= – P_{n} + P_{n+1} + n(P_{n+1} – P_{n}) + P_{1} = (n+1)(P_{n+1} – P_{n})

**QED**

SVG supports Bézier curves of up to the third degree. A path consisting of such curves are good approximations of shapes provided that you have enough points.