Bézier Curves and Splines: The Mathematics of Smooth Design
Every font on your screen, every rounded corner in a logo, every smooth animation path in a video game traces back to one elegant mathematical idea: the Bézier curve. Invented independently in the 1960s by Paul de Casteljau at Citroën and Pierre Bézier at Renault, these parametric polynomial curves let designers control smooth shapes with a handful of intuitive control points. Understanding their maths unlocks fonts, CAD tools, animation rigs, and path-planning algorithms alike.
1. Parametric Curves and the Parameter t
An ordinary function y = f(x) can only describe curves that pass the vertical-line test — useless for loops, spirals, or closed shapes. A parametric curve instead expresses both x and y (and z in 3D) as functions of an independent parameter t, typically ranging from 0 to 1:
At t = 0 the curve starts; at t = 1 it ends. Values in between trace the path continuously. The speed at which t advances does not change the shape, only the rate of traversal — a key property that makes parametric curves easy to animate.
The tangent vector at any point is simply the derivative with respect to t:
Knowing this tangent is crucial for connecting curve segments smoothly and for computing surface normals in 3D modelling.
2. De Casteljau's Algorithm
Paul de Casteljau devised a beautifully geometric way to evaluate a Bézier curve without any explicit polynomial formula. Given n+1 control points P₀, P₁, …, Pₙ, the algorithm repeatedly linearly interpolates neighbouring points until one point remains — that point lies on the curve at parameter t.
For a quadratic Bézier (n = 2, three control points P₀, P₁, P₂):
Level 2: B(t) = (1−t)·Q₀(t) + t·Q₁(t)
For a cubic Bézier (n = 3, four control points), an additional interpolation level is added:
Level 2: R₀ = (1−t)Q₀ + tQ₁, R₁ = (1−t)Q₁ + tQ₂
Level 3: B(t) = (1−t)R₀ + tR₁
The algorithm is numerically stable and naturally provides a subdivision mechanism: the left sub-curve uses the intermediate points computed along the left branch; the right sub-curve uses those on the right branch. This is the basis of adaptive rendering: subdivide until each piece is flat enough to approximate with a straight line.
3. Bernstein Polynomials and the Explicit Formula
The same curve can be expressed as a weighted sum of control points, where the weights are Bernstein basis polynomials:
where C(n,i) = n! / (i! · (n−i)!) is the binomial coefficient
The scalar weight for the i-th control point at parameter t is:
Bernstein polynomials have several crucial properties that make Bézier curves well-behaved:
- Partition of unity: Σᵢ Bᵢ,ₙ(t) = 1 for all t. The curve is always a convex combination of the control points.
- Non-negativity: Bᵢ,ₙ(t) ≥ 0 for t ∈ [0,1], which implies the curve lies within the convex hull of the control points.
- Endpoint interpolation: B(0) = P₀ and B(1) = Pₙ exactly. The curve passes through the first and last control points.
- Symmetry: Reversing the parameter (t → 1−t) gives the same curve traversed backwards.
For a cubic curve (n = 3), the four Bernstein polynomials are:
These sum to (1−t+t)³ = 1, confirming partition of unity, and each peaks exactly once in [0,1], giving each control point a distinct region of influence.
4. Cubic Bézier Curves in Practice
Cubic Bézier curves — defined by exactly four control points — are
the workhorse of 2D graphics. SVG's C command, the CSS
cubic-bezier() timing function, PostScript fonts, and
PDF paths all use them exclusively.
Given control points P₀, P₁, P₂, P₃, the curve equation in matrix form is:
where M_B (Bézier basis matrix) = [ 1 0 0 0 ] [−3 3 0 0 ] [ 3 −6 3 0 ] [−1 3 −3 1 ]
The first derivative at the endpoints tells us the tangent directions:
This means P₁ lies along the tangent from P₀, and P₂ lies along the tangent into P₃. Designers intuitively pull the handles P₁ and P₂ to steer the curve's entry and exit angles.
cubic-bezier(0.25, 0.1, 0.25, 1.0)
defines a curve in the unit square where P₀ = (0,0), P₃ = (1,1)
are fixed, and P₁ = (0.25, 0.1), P₂ = (0.25, 1.0) are the two
handles. The x-axis is time, the y-axis is animation progress — the
curve's shape determines easing.
5. Splines, Continuity, and B-Splines
A single high-degree Bézier curve becomes unwieldy — moving one control point affects the entire curve. The solution is to join multiple low-degree (usually cubic) segments end-to-end into a spline, enforcing continuity conditions at each join.
Continuity Classes
- C⁰ continuity: segments share an endpoint. The curve is connected but may have a corner.
- C¹ continuity: the first derivatives match. Tangent direction and speed are continuous — no kink. Achieved by making P₁, P₃ = P₀', P₂' collinear and equidistant around the join point.
- C² continuity: curvature is also continuous. Required for aesthetically smooth surfaces and is the defining property of natural cubic splines.
- G¹/G² geometric continuity: direction (but not speed) of tangent/curvature matches. Used in font design where reparameterisation is acceptable.
B-Splines and NURBS
B-splines (Basis splines) generalise Bézier curves by distributing control points over a knot vector rather than tying each segment to exactly four points. A B-spline of degree d with n+1 control points and knot vector T = {t₀, t₁, …, tₘ} is:
where Nᵢ,d(t) are defined by the Cox–de Boor recursion:
Nᵢ,₀(t) = 1 if tᵢ ≤ t < tᵢ₊₁, else 0 Nᵢ,d(t) = (t−tᵢ)/(tᵢ₊d−tᵢ) · Nᵢ,d₋₁(t) + (tᵢ₊d₊₁−t)/(tᵢ₊d₊₁−tᵢ₊₁) · Nᵢ₊₁,d₋₁(t)
NURBS (Non-Uniform Rational B-Splines) add a weight wᵢ to each control point, enabling exact representation of conic sections (circles, ellipses, parabolas). They are the standard currency of CAD/CAM and ISO exchange formats such as STEP and IGES.
Interactive Bézier Curve Simulation
Drag control points, watch de Casteljau's construction animate in real time, and explore how degree and control-point placement shape the curve.
6. Real-World Applications
Typography and Font Rendering
TrueType fonts store glyph outlines as quadratic Bézier segments; OpenType/PostScript fonts use cubics. A single letter such as "g" may comprise 10–30 curve segments. The font rasteriser evaluates these curves at sub-pixel resolution, anti-aliases them, and renders the result to a pixel grid. FreeType, the open-source library powering Linux, Android, and many embedded devices, uses de Casteljau subdivision to avoid floating-point instability on low-end hardware.
Animation and Motion Paths
Animation software such as Blender, Adobe After Effects, and Unreal Engine stores keyframe data as cubic splines in time. The animator adjusts handles (the P₁, P₂ tangent points) to create slow-in, slow-out easing effects. Game engines use Hermite splines (equivalent to Bézier cubics but parameterised by endpoint positions and derivatives) for character motion along rails, camera dolly paths, and procedural terrain profiles.
CAD and Manufacturing
Automotive body panels, aircraft fuselages, and turbine blade profiles are all designed using NURBS surfaces — tensor products of NURBS curves in two parametric directions. The ISO STEP format exchanges these models between CAD systems. CNC milling machines receive G-code with arc and spline interpolation commands derived from the NURBS geometry. The manufacturing tolerance is typically controlled by the surface's curvature radius, which is the second derivative of the parametric curve: κ = |B'×B''| / |B'|³.
Robotics and Path Planning
Robot arms and autonomous vehicles must follow smooth paths to avoid jerky accelerations that stress mechanical joints. A trajectory planner generates cubic splines in joint-angle space satisfying velocity and acceleration boundary conditions at each waypoint, minimising the integral of squared jerk — the third derivative of position. Quintic (degree-5) Hermite splines are preferred when acceleration continuity is also required.
Parametric Surfaces Simulation
See how two-dimensional Bézier patches combine into smooth 3D surfaces — the technology behind CAD modelling and GPU tessellation shaders.
Frequently Asked Questions
What is the difference between a Bézier curve and a spline?
A Bézier curve is a single polynomial segment defined by n+1 control points. A spline is a piecewise curve composed of multiple Bézier (or other polynomial) segments joined with continuity constraints. Splines offer local control — moving one handle only affects nearby segments — whereas changing a control point of a high-degree Bézier curve shifts the entire curve.
Why do cubic Bézier curves dominate over quadratic or higher-degree ones?
Cubic curves strike the ideal balance: four control points give independent control of both endpoints and both tangent directions, which is exactly enough to match C¹ or G¹ continuity at joins without over-constraining the shape. Quadratics lack an independent tangent at each end; degree 5+ adds unnecessary complexity with diminishing returns for most design tasks.
How does the convex hull property help in computer graphics?
Because a Bézier curve always lies within the convex hull of its control points, collision tests between a curve and a region can first check whether the convex hull intersects — a trivially fast test with axis-aligned bounding boxes. Only if it does is a more expensive per-point evaluation needed. This hierarchical rejection accelerates font rendering, ray-tracing curved surfaces, and intersection tests in 2D vector editors.
What is the degree of a Bézier curve with n control points?
A Bézier curve defined by n+1 control points (P₀ through Pₙ) has degree n. So two points give a degree-1 (linear) curve, three give quadratic (degree 2), four give cubic (degree 3), and so on. Adding a control point raises the degree by exactly one.
Can a Bézier curve represent a perfect circle?
No — a polynomial Bézier curve cannot exactly represent a circle. A rational Bézier curve (with weights, i.e. NURBS) can. As an approximation, a cubic Bézier quarter-circle using handle distance k ≈ 0.5523 of the radius from each endpoint achieves a maximum radial error of about 0.027%, which is imperceptible at screen resolution.
What is C² continuity and why does it matter?
C² continuity means both the first derivative (tangent) and second derivative (curvature) match across a join. This produces curves that look visually smooth without any perceptible inflection or kink at the seam. Natural cubic splines and NURBS surfaces typically enforce C² internally. Without it, highlights on a reflective surface reveal the joins as abrupt changes in the reflection band.
How does CSS use Bézier curves for animation timing?
The CSS cubic-bezier() function takes four numbers — (x₁, y₁, x₂, y₂) — defining the two inner control points of a cubic Bézier in the unit square, with (0,0) and (1,1) fixed as start and end. The x-axis represents normalised time, the y-axis represents normalised animation progress. The preset keywords ease, ease-in, ease-out, and ease-in-out are all shorthand cubic-bezier() calls.
What is the Cox–de Boor algorithm?
The Cox–de Boor recursion is to B-splines what de Casteljau's algorithm is to Bézier curves: a numerically stable, recursive evaluation scheme. It computes the B-spline basis function Nᵢ,d(t) by successively blending lower-degree basis functions over the knot vector. It is the standard algorithm in all CAD kernels and is mathematically equivalent to repeated knot insertion.
What are NURBS and why are they used in CAD?
Non-Uniform Rational B-Splines (NURBS) are B-splines where each control point carries a weight wᵢ. The rational form (dividing by the sum of weighted basis functions) enables exact representation of conic sections — circles, ellipses, and hyperbolas — which polynomial curves can only approximate. Because engineering shapes often include such conics, NURBS are the standard geometry type in CAD exchange formats like STEP and IGES.
What is subdivision and how does it accelerate rendering?
De Casteljau's algorithm at t = 0.5 simultaneously evaluates the midpoint and splits the curve into two sub-curves of half the parameter range. Repeated subdivision produces progressively shorter segments that approach straight lines. A renderer stops subdividing when a segment's deviation from its chord falls below one pixel, then draws the chord. This adaptive technique renders smooth curves with far fewer line segments than a fixed-step approach.