Bezier Curves: The Mathematics of Smooth Shapes

Look at any letter on this screen. The smooth curves of the typeface — the bowl of the ‘o’, the spine of the ‘s’, the tail of the ‘a’ — are not stored as long lists of pixel coordinates. They are stored as small collections of control points that define Bézier curves. The same is true for almost every vector graphic, every animated path in software like After Effects, and every shape in tools like Adobe Illustrator and Figma.

Bézier curves are one of the quietly universal mathematical tools of modern computing. The mathematics is from the early 1960s, developed by engineers at French car companies trying to design smoother car bodies. It turned out that the same construction was exactly what the digital age would need for representing smooth shapes computationally.

This article is about what Bézier curves are, how they work, and why this 60-year-old piece of mathematics underlies most of what you see on screens today.

The setup

A quadratic Bézier curve is defined by three points: two endpoints $P_0, P_2$ and one control point $P_1$ . The curve goes from $P_0$ to $P_2$ , but it’s pulled toward $P_1$ . As the parameter $t$ runs from 0 to 1, the curve traces from start to end:

$B(t) = (1-t)^2 P_0 + 2(1-t)t \, P_1 + t^2 P_2.$

A cubic Bézier curve has four points: $P_0, P_1, P_2, P_3$ :

$B(t) = (1-t)^3 P_0 + 3(1-t)^2 t \, P_1 + 3(1-t) t^2 P_2 + t^3 P_3.$

The endpoints $P_0, P_3$ are where the curve starts and ends. The interior points $P_1, P_2$ pull the curve in their directions but the curve doesn’t pass through them.

Here’s a simple illustration. The four black dots are the control points; the gray dashed lines connect them; the red curve is the resulting cubic Bézier:

The curve starts at $P_0$ , ends at $P_3$ , and is pulled toward $P_1$ and $P_2$ in between. Move any control point and the curve responds intuitively. This intuitiveness is one of the main reasons Béziers are used: a designer can shape a curve by dragging visible handles.

The De Casteljau algorithm

The most elegant way to evaluate a Bézier curve at parameter $t$ is the De Casteljau algorithm, which is purely geometric.

For a cubic Bézier with control points $P_0, P_1, P_2, P_3$ :

Compute $Q_0 = (1-t) P_0 + t P_1$ — a point on the segment $P_0 P_1$ .
Compute $Q_1 = (1-t) P_1 + t P_2$ .
Compute $Q_2 = (1-t) P_2 + t P_3$ .
Compute $R_0 = (1-t) Q_0 + t Q_1$ .
Compute $R_1 = (1-t) Q_1 + t Q_2$ .
The point on the curve is $B(t) = (1-t) R_0 + t R_1$ .

You’re recursively interpolating between successive control points. After three rounds, you reach a single point — that’s the curve at $t$ .

Here’s the construction at $t = 0.5$ :

Each level of dashed lines represents one round of interpolation. The single red dot is the final point on the curve. At $t = 0.5$ , you take midpoints; at any other $t$ , you take the appropriate weighted point.

The algorithm is numerically stable, easy to implement, and naturally extends to subdividing a Bézier curve into smaller Béziers — useful for rendering with adaptive precision.

Where Bézier curves are used

The applications are vast.

Typography. Modern fonts (TrueType, OpenType, PostScript) describe each character glyph as a series of straight lines and Bézier curves. The ‘o’ you read as a circle is actually four cubic Bézier arcs. Adjusting the font weight smoothly is essentially adjusting Bézier control points smoothly.

Vector graphics. SVG, Adobe Illustrator, Figma, Sketch, Inkscape — all represent curves as Béziers. Every logo, every icon, every shape in vector art form is a collection of Béziers.

Animation. Motion paths in After Effects, Lottie, and most animation tools are Béziers. Smooth easing curves (the timing functions in CSS animations like cubic-bezier(0.42, 0, 0.58, 1)) are Béziers in two dimensions: time vs. progress.

3D modeling. Bézier surfaces (tensor products of Bézier curves) define smooth surfaces in CAD software. Cars, planes, ships, and consumer products all begin life as Bézier-surface models.

Game development. Smooth motion paths for camera movement, character animation, and procedural generation.

Medical imaging. Outlining anatomical structures in MRI/CT data is often done by clicking control points of Bézier curves.

Robotics and motion planning. Smooth trajectories for robot arms or drones are often Bézier paths.

The same mathematical primitive serves all these domains. This is one of the cleanest examples of a mathematical idea that turned out to be the right abstraction for many independent applications.

Properties that make Béziers nice

Several mathematical properties make Béziers particularly well-suited to graphics:

Endpoint interpolation. The curve passes through $P_0$ and $P_n$ exactly. The other control points pull the curve but don’t lie on it.

Convex hull property. The curve always stays inside the convex hull of its control points. This means you can quickly bound a Bézier with a rectangle and skip rendering Béziers that are off-screen.

Variation diminishing. A line crosses a Bézier curve no more times than it crosses the control polygon. This prevents Béziers from oscillating wildly.

Affine invariance. Applying any affine transformation (rotation, scaling, translation, shear) to the control points produces the same Bézier as applying the transformation to the curve itself. So you can transform the control points and recompute, rather than transforming the entire rendered curve.

Subdivision. Any Bézier curve can be split at any parameter $t$ into two Béziers of the same degree. This is the basis of adaptive rendering: subdivide until each piece is small enough to render as a straight line, then draw lines.

Each of these properties is a theorem about the polynomial structure of Bézier curves. Together they make the mathematics genuinely well-suited to the engineering need.

Continuity and chaining

To make a complex shape, you usually chain Bézier curves together. Endpoint of one curve is start of the next. To make the chain smooth (no visible kinks), there are different levels of continuity:

$C^0$ continuity: curves meet at the same point but can have different tangent directions. The shape has a sharp corner.

$C^1$ continuity: tangent vectors match in direction and magnitude at the join. The shape is smooth.

$C^2$ continuity: matches first and second derivatives. The shape has matching curvature too.

$G^1$ continuity (geometric): tangent directions match but magnitudes don’t have to. Smooth-looking but parameterization can be uneven. Often sufficient for graphics where you only see the shape.

For a Bézier control polygon, $G^1$ continuity at the joining endpoint requires that the two adjacent control points be collinear with the shared endpoint. Designers achieve this naturally by manipulating “tangent handles” on each side of an anchor point — the handles are the adjacent control points.

This is why Adobe Illustrator and Figma have those tangent handles you see when editing curves: they’re the Bézier control points implementing $G^1$ continuity.

Bézier curves in CSS animation

Web designers encounter Bézier curves explicitly in CSS animation timing functions:

.element {
  transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

This cubic-bezier(0.42, 0, 0.58, 1) is a 2D Bézier curve where the x-axis is time (0 to 1) and the y-axis is animation progress (0 to 1). The four numbers are the x and y coordinates of the two interior control points (the endpoints are fixed at $(0,0)$ and $(1,1)$ ).

The named easing functions ease, ease-in, ease-out, ease-in-out are all specific Béziers. The ease-in-out function is cubic-bezier(0.42, 0, 0.58, 1) — start slow, speed up, slow down at the end. This kind of “motion curve” produces the visual feeling of natural movement.

When animation looks “natural” or “snappy” or “bouncy,” the underlying difference is usually a different Bézier easing curve.

The historical accident

Bézier curves are named for Pierre Bézier, who developed them at Renault around 1962 for designing car bodies. Renault published his work, and the curves became known by his name.

But Paul de Casteljau, working at Citroën, had developed essentially the same idea slightly earlier (1959) — he just couldn’t publish because Citroën kept it as a trade secret. The recursive evaluation algorithm is named after him by way of compensation, but the curves themselves carry Bézier’s name.

This kind of priority-by-publication is a recurring pattern in mathematics: who got the credit was determined by who could publish, not always by who was first. It’s a small unfairness in the historical record.

What Bézier curves teach

The deepest lesson of Bézier curves is that the right mathematical primitive can quietly become universal. Bézier curves were invented for one application (car-body design) but turned out to be the right tool for almost every situation requiring smooth digital shapes.

This is partly because the underlying mathematics has good properties (convex hull, affine invariance, easy subdivision) and partly because the construction matches human intuition: control points that you can grab and move. The combination — mathematically clean and humanly understandable — is rare and valuable.

For everyday users: the next time you read a font, watch a smooth animation, or look at a vector logo, you’re seeing Bézier curves. The 1962 mathematics is doing the work, scaled up to billions of computers and trillions of rendered shapes.

For mathematicians and engineers: Bézier curves are a successful template for “domain-aware mathematics” — finding mathematical objects whose theory matches the problem’s natural operations. The curves are polynomials, but the polynomials are organized so that the natural questions (subdivide, transform, evaluate) have natural answers.

That kind of fit between mathematics and application is, perhaps, what good applied mathematics looks like. Two French car engineers in the early 1960s did it for car bodies, and the rest of the digital world has been benefiting ever since.

Frequently asked

Why are Bézier curves the standard for graphics?

Three reasons. First, they're easy to manipulate — moving a control point intuitively changes the curve. Second, they're computationally efficient, evaluable in real-time. Third, they have nice mathematical properties: curves stay within the convex hull of their control points, and you can always smoothly subdivide them. Together, these make Bézier curves the right primitive for vector graphics, font design, and animation.

Did Pierre Bézier really invent them?

He developed them at Renault around 1962 for car-body design and named them. But Paul de Casteljau at Citroën developed essentially the same idea slightly earlier (1959), kept it as a trade secret. The De Casteljau algorithm — the recursive way to evaluate a Bézier curve — bears his name and is the standard computational method. Both deserve credit, but Bézier published first publicly.

Are there higher-degree Bézier curves?

Yes. Quadratic (3 control points), cubic (4), quartic (5), and so on. In practice, cubic Béziers are by far the most common — they're flexible enough for most shapes and computationally cheap. Higher-degree curves are sometimes used in specialized contexts but require more computation and can behave less predictably under control-point manipulation.

Bezier Curves: The Mathematics of Smooth Shapes

The setup

The De Casteljau algorithm

Where Bézier curves are used

Properties that make Béziers nice

Continuity and chaining

Bézier curves in CSS animation

The historical accident

What Bézier curves teach

Frequently asked

Continue reading

Sphere Packing: The Densest Way to Stack Oranges, Proved at Last

Euler's Polyhedron Formula: Why V − E + F Always Equals 2

Pick's Theorem: Counting Dots to Measure Area

Keep exploring