Bézier Curves and De Casteljau's Algorithm

After reading this you will be able to compute any point on a Bézier curve by hand using two methods, De Casteljau's repeated interpolation and the Bernstein polynomial blend, and you will know why the curve stays inside its control points and why the endpoints steer the direction.

What a Bézier curve is

A Bézier curve is a smooth path defined by a handful of control points. You place the points, and the curve threads through the first and last one while being pulled toward the ones in between. It never has to pass through the middle points. It just leans toward them.

Here is the hook. Take three points: P_0 = (0, 0), P_1 = (1, 2), and P_2 = (2, 0). The quadratic Bézier through these starts at (0, 0), ends at (2, 0), and arches up toward (1, 2) without ever touching it. At the parameter value t = 0.5 the curve sits at (1, 1), which is exactly halfway up to the peak, not at the peak itself. You will reproduce that number below.

Every letter you read on a screen, every vector logo, every "ease-in-out" animation curve is built from Bézier segments. The reason is practical: the curve is fully described by a few points, it is fast to evaluate, and it behaves predictably when you drag those points.

When to reach for a Bézier curve

Use a Bézier when you want a smooth curve that you control by dragging a small number of handles, and when you want a guarantee that the curve stays within a known region. That guarantee, the convex hull property, matters for clipping, collision tests, and font rendering.

Do not use a single high-order Bézier to fit many data points. A curve with 12 control points is a degree-11 polynomial, and high-degree polynomials wiggle. Moving one control point changes the whole curve, because every control point influences every value of t. When you have many points, professionals join short Bézier segments end to end into a spline instead, matching positions and tangents at the joints. That keeps each piece low-degree and local.

A cubic Bézier (four control points) is the workhorse. It has just enough freedom to make an S-shape, and both fonts (TrueType uses quadratics, PostScript and most SVG use cubics) and CSS easing curves are built from it.

The two formulas, and why they agree

There are two ways to define the same curve. The first is De Casteljau's algorithm, which is pure repeated linear interpolation. Linear interpolation between two points A and B is:

\text{lerp}(A, B, t) = (1 - t)\, A + t\, B

Here t runs from 0 to 1. At t = 0 you get A, at t = 1 you get B, and in between you slide along the straight segment.

De Casteljau's rule says: interpolate between every neighbouring pair of control points to get one fewer point, then repeat on the new points, and keep going until a single point remains. That last point is the curve position at that t. Sweep t from 0 to 1 and the point traces the whole curve.

The second definition writes the curve directly as a weighted average of the control points. The weights are the Bernstein polynomials of degree n:

B(t) = \sum_{i=0}^{n} \binom{n}{i}\, (1 - t)^{n-i}\, t^{i}\; P_i

In this formula n is the degree (one less than the number of control points), P_i is the i-th control point, and \binom{n}{i} is the binomial coefficient. The factor \binom{n}{i}(1-t)^{n-i} t^{i} is the blending weight on point P_i. These weights are never negative, and they sum to exactly 1 at every t, because they are the terms of the expansion of ((1-t) + t)^n = 1. A weighted average with non-negative weights that sum to 1 always lands inside the convex hull of the points. That is the convex hull property, proven in one line.

The two definitions give the same curve. De Casteljau is just the nested, numerically stable way of computing the same polynomial.

Working the quadratic by hand at t = 0.5

Use the playground's default points: P_0 = (0, 0), P_1 = (1, 2), P_2 = (2, 0). Evaluate at t = 0.5 both ways.

First De Casteljau round. Interpolate P_0 P_1: (1-0.5)(0,0) + 0.5(1,2) = (0.5, 1). Interpolate P_1 P_2: (1-0.5)(1,2) + 0.5(2,0) = (1.5, 1).
Second round. Interpolate those two points: 0.5(0.5, 1) + 0.5(1.5, 1) = (1, 1). One point left, so the curve passes through (1, 1) at t = 0.5.
Now the Bernstein way. For degree 2 the weights are (1-t)^2, 2(1-t)t, and t^2. At t = 0.5 that is 0.25, 0.5, 0.25, which sum to 1.
Blend: 0.25(0,0) + 0.5(1,2) + 0.25(2,0) = (0.5 + 0.5, 1) = (1, 1). Same answer.

Notice the peak of the curve is at y = 1, only half the height of the control point at y = 2. The curve leans toward P_1 but reaches only to the middle of the maximum weight.

The Bernstein weights in one picture

For a cubic (four control points) the four blending weights across t tell you which control point dominates where. At t = 0 only P_0 has weight 1. At t = 1 only P_3 does. In the middle all four contribute.

The weight on the first control point, (1-t)^3. It starts at 1 and falls to 0, handing influence to the later points.

That single weight, (1-t)^3, drops from 1 at t = 0 to 0.125 at t = 0.5 to 0 at t = 1. The four cubic weights at t = 0.5 are 0.125, 0.375, 0.375, 0.125, which sum to 1 and are symmetric, so at the midpoint the two inner points pull three times harder than the outer two.

Reading the construction: tangents and speed

Two features of the curve fall straight out of the math. First, the curve is tangent to the control polygon at each end. The starting direction points from P_0 toward P_1, and the ending direction points from P_{n-1} toward P_n. That is why dragging the handle next to an endpoint aims the curve as it leaves that point.

For the cubic the tangent at the start has length 3(P_1 - P_0). Concretely, if P_0 = (0,0) and P_1 = (0.5, 0), the starting velocity is (1.5, 0): the curve leaves horizontally and fairly fast. Move P_1 up and the departure tilts up.

Second, the parameter t is not arc length. Equal steps in t do not give equal steps in distance along the curve. Where the control points bunch up the curve moves slowly, and where they spread out it moves fast. This is exactly how CSS easing works: a cubic-bezier timing function maps clock time to animation progress, and the uneven speed is the point.

Common mistakes

Do not confuse a Bézier with an interpolating spline. A Bézier ignores its interior control points as targets, so if you expected the curve to pass through P_1 you will be surprised every time. If you need the curve to hit given points, that is a different problem (Catmull-Rom or natural cubic splines).

Three more traps to avoid:

Raising the degree to add detail. A degree-15 Bézier is numerically fragile and its control points lose local meaning. Chain low-degree segments instead.
Assuming smooth joins are automatic. When you glue two Bézier segments, the join is smooth only if the last two points of one and the first two of the next are collinear and the tangent lengths match. Otherwise you get a visible kink.
Reading t as a fraction of the drawn length. At t = 0.5 you are halfway in parameter, not halfway in distance. For a curve with a tight bend, the halfway point by length can sit well away from t = 0.5.

Related tools on this site

If the idea of building curves from spinning or stacking simple pieces interests you, several neighbours make good next stops. The Fourier Epicycles tool redraws any closed shape from rotating circles, a different decomposition of the same "curve from parameters" idea. The Spirograph traces curves from rolling gears rather than control points. For a straight-line take on transforming geometry, the Linear Transformation Playground shows what a 2x2 matrix does to a whole grid. And to see a continuous line that fills a square, visit the Hilbert Curve Explorer.

Frequently asked questions

Why does the curve not touch the middle control points?

Because the curve is a weighted average of all control points, and at no value of t does an interior point ever get the full weight of 1. For a cubic the largest weight any interior point reaches is 0.4444, at t = 1/3 for P_1. The other points always share some of the pull.

What is the difference between quadratic and cubic Bézier curves?

A quadratic has three control points and one interior handle, so it can bend once. A cubic has four control points and two interior handles, so it can make an S-shape with an inflection. Fonts using TrueType outlines store quadratics; SVG paths and PostScript use cubics.

Is De Casteljau's algorithm the same as the Bernstein formula?

They compute the identical curve. De Casteljau evaluates it by nested linear interpolation, which is numerically stable and gives you the construction points for free. The Bernstein form writes the answer as one weighted sum. Use De Casteljau when you also want to split a curve at a point.

Can I control the speed along a Bézier curve?

Not directly through t, because t is not distance. To move at constant speed you reparametrize by arc length, usually by sampling the curve at many t values, summing segment lengths, and building a lookup table from distance back to t.

How many control points can a single Bézier have?

Any number, but past four or five the curve gets unwieldy and numerically touchy. In practice you stop at cubic and join segments into a spline for anything longer.

Try it yourself in the tool