THE IDEA
Ends fixed, middle pulled
The curve always passes through its first and last points. The points between steer it like magnets.
How it is built
HOW SMOOTH CURVES ARE MADE
Four points.
One smooth curve.
Almost every curve on your screen is drawn the same way.
The letters in this sentence, the icons on your phone and the way a menu slides open are all built from Bézier curves: a start, an end and a couple of points that pull the line between them. The idea came from French car design around 1960. Here is how it works, in plain English.
Plain English, with the sources linked.
CURVE start, pull, end
Try the easing curves- Fix the ends
- Pull with handles
- Join smoothly
- Fewer points, smoother lines
THE SHORT ANSWER
Anchor it, then pull it.
A Bézier curve runs from one point to another,
bent by control points it never touches.
THE ORIGIN
Born in car design
Engineers at Citroën and Renault worked out the maths to describe car body shapes for machines.
Meet the curve’s two fathers
ON YOUR SCREEN
Letters, icons, motion
Fonts, SVG graphics and CSS animations all describe their curves with the same few points.
See four easing curves
DRAW BETTER CURVES
Four habits
for smoother lines.
Use fewer points
Each segment can bend a long way on its own. Fewer anchor points usually give a smoother, cleaner line that is easier to edit.
Line up handles across a joint
Where two curves meet, keep the handles on either side in a straight line. That is what SVG’s S command does for you, and it hides the seam.
Keep handles near the shape
The curve can never stray outside its control points, so pulling a handle far out is the quickest way to get an unwanted bulge.
Try the presets first
For motion, start with ease, ease-in, ease-out or ease-in-out. Only reach for your own cubic-bezier() values when none of them feels right.
TWO ENGINEERS, ONE CURVE
From car bodies
to your screen.
The same idea was found twice,
at two rival French car makers.
1959
Paul de Casteljau’s algorithm
De Casteljau found a way to draw the curve by repeated in-between steps: find the point part-way along each line between control points, then repeat on the new points until one point is left. It still works for curves of any degree.
CITROËN · 1959
42 years
Pierre Bézier’s years at Renault
Bézier joined Renault in 1933, aged 23, and stayed for 42 years. From 1960 he spent much of his time on UNISURF, a system for designing free-form curves and surfaces by computer. The curves now carry his name.
RENAULT · 1960
Car makers needed a way to give a machine the exact shape of a body panel. Describing a curve with a handful of points turned out to be just as useful for letters on a page.
EASING CURVES
The curve behind
every animation.
When a web page animates something, a cubic Bézier curve sets its pace. The curve runs from (0, 0) to (1, 1); the two orange handles shape it. Pick one of the four named CSS curves to see it drawn exactly.
Time runs left to right, progress runs bottom to top. A steep part of the curve means fast movement; a flat part means slow.
CURVE FACTS
Five things worth
knowing.
Only the ends are touched
A Bézier segment passes through its first and last control points. At each end, the curve heads straight towards the neighbouring control point.
It never leaves its frame
The whole curve stays inside the shape you get by wrapping its control points, known as the convex hull. That makes curves predictable to draw and quick to check.
Letters use two kinds
TrueType fonts build letters from quadratic curves with one control point each. PostScript Type 1, CFF and CFF2 fonts use cubic curves with two.
Some points are invented
When a TrueType outline has two control points in a row, the renderer adds an on-curve point exactly halfway between them, so the shape stays smooth.
Web graphics speak in letters
In SVG, C draws a cubic curve with two control points and Q a quadratic with one. S and T reflect the previous control point, so the next curve joins smoothly.
QUICK QUESTIONS
Curves, answered.
Short answers to the questions people ask most.
What is a Bézier curve?
A smooth curve defined by a few control points. It starts at the first point and ends at the last; the points in between pull the curve towards them without the curve passing through them. A cubic Bézier, the most common kind, has four points in total.
Who invented Bézier curves?
Two French car engineers worked on the idea separately. Paul de Casteljau developed his method at Citroën in 1959, and Pierre Bézier, who spent 42 years at Renault, began work on his UNISURF design system in 1960. The curves carry Bézier’s name.
Why do some fonts use different curves from others?
TrueType fonts describe letter outlines with quadratic curves, which have one control point per segment. PostScript Type 1, CFF and CFF2 fonts use cubic curves, which have two. Both can draw smooth letters; they simply store the shapes differently.
What does cubic-bezier() mean in CSS?
It sets the timing of an animation or transition as a cubic Bézier curve. The start is fixed at (0, 0) and the end at (1, 1), and you choose the two middle points. Their x values must stay between 0 and 1. The keyword ease is the same as cubic-bezier(0.25, 0.1, 0.25, 1).
Does a Bézier curve pass through all of its points?
No. It always passes through the first and last points, but the middle control points act like magnets: they set the direction and pull of the curve. The whole curve also stays inside the shape formed by its control points.
Sources
- CSS Easing Functions Level 1: cubic-bezier() and the keywordsW3C
- SVG 2: Paths, including the C, Q, S and T commandsW3C
- Glyph conventions: outlines and Bézier arcs in fontsFreeType Project
- Pierre Bézier: an obituary and biographyNA Digest, Cornell University, 1999
- CS559 lecture: Bézier curves and de Casteljau’s algorithmUniversity of Wisconsin–Madison
- Geometric modelling lecture: Bézier curves and Bernstein polynomialsNew York University
Updated