About Bézier Curves & Splines
A Bézier curve is a smooth parametric curve defined by a set of control points, invented independently by Pierre Bézier at Renault and Paul de Casteljau at Citroën in the 1960s for car body design. The curve of degree n is given by the Bernstein polynomial B(t) = Σ Pᵢ ⋅ C(n,i) ⋅ (1−t)ⁿ⁻ᶦ ⋅ tᶦ, where t ∈ [0,1] and C(n,i) are the binomial coefficients. The de Casteljau algorithm evaluates this geometrically by repeatedly linearly interpolating between pairs of points — an elegant recursive construction that is numerically stable and visually intuitive.
The simulator lets you place control points by clicking, drag them to reshape the curve in real time, chain cubic Bézier segments into smooth splines (C¹ or G¹ continuity), and watch the subdivision polygon at each step of de Casteljau's construction animate as the parameter t sweeps from 0 to 1.
Frequently Asked Questions
What is de Casteljau's algorithm?
De Casteljau's algorithm evaluates a Bézier curve at parameter t by repeatedly linearly interpolating between adjacent control points. For a cubic curve (4 control points P₀–P₃), the first round gives 3 intermediate points, the second gives 2, and the third gives the single curve point B(t). The intermediate points form a triangle of line segments whose hypotenuse is tangent to the curve — visible in the animation as the moving "subdivision polygon".
Why are cubic Bézier curves so widely used?
Cubic curves (degree 3, 4 control points) offer the minimum degree needed to specify both endpoints and both tangent directions independently, giving full shape control with the fewest parameters. Higher-degree curves can oscillate (Runge's phenomenon) and are harder to edit intuitively. Virtually every vector graphics format — SVG, PDF, PostScript, TrueType/OpenType fonts, and CSS animations — uses cubic Bézier curves as the fundamental shape primitive.
What is a B-spline, and how does it differ from a Bézier curve?
A B-spline (basis spline) is a piecewise polynomial curve defined by a knot vector that determines where polynomial segments join. Unlike a Bézier curve, each control point in a B-spline only influences a local region of the curve (the support is finite), so moving one point does not reshape the entire curve — a property called local control. NURBS (Non-Uniform Rational B-Splines) extend B-splines with weights and are the standard representation in CAD software like AutoCAD and SolidWorks.
How do you ensure smooth joins between cubic segments?
For C¹ continuity (matching first derivatives), the last control point of segment k, the first control point of segment k+1, and the shared endpoint must be collinear, with the distances from the endpoint equal. This ensures the tangent direction and magnitude are identical across the join. For G¹ continuity (matching tangent direction but not necessarily magnitude) only collinearity is required — a weaker but visually smooth condition used in font design.
What are Bernstein basis polynomials?
The Bernstein polynomials B(i,n,t) = C(n,i)⋅tᶦ⋅(1−t)ⁿ⁻ᶦ form a basis for polynomials of degree n on [0,1]. They are non-negative, sum to 1, and each achieves a unique maximum at t = i/n. Because the curve is a weighted average of control points (weights = Bernstein polynomials), the curve always lies within the convex hull of the control polygon — a key geometric property that makes Bézier curves easy to clip and intersect.
How are Bézier curves used in typography?
TrueType fonts use quadratic Bézier curves (3 control points per segment) stored as compact numerical data to define glyph outlines. OpenType fonts can use either quadratic (as in TrueType) or cubic (as in PostScript Type 1) Bézier segments. At display time, the rasteriser evaluates the curves at the appropriate resolution and fills the interior — this is why scalable fonts look crisp at any size. A single ASCII character might be composed of 10–30 Bézier segments.
What is the convex hull property?
The convex hull of a set of points is the smallest convex region containing all of them — think of it as the shape made by stretching a rubber band around the points. Because Bézier curves are convex combinations of their control points (Bernstein weights are non-negative and sum to 1), the curve always stays within the convex hull of its control polygon. This property is used in collision detection and ray-curve intersection algorithms: if a ray misses the convex hull, it cannot hit the curve.
How is the Bézier curve related to animation easing?
CSS and SVG use cubic Bézier curves to define animation easing functions, specified as cubic-bezier(x₁, y₁, x₂, y₂) where the two control points (with endpoints fixed at (0,0) and (1,1)) determine how quickly the animated value changes over time. The familiar "ease-in-out" function is approximately cubic-bezier(0.42, 0, 0.58, 1). The curve maps normalised time (t) to normalised progress, so a steep section means rapid change while a flat section means slow change.
Can Bézier curves represent circles exactly?
No — rational Bézier curves (NURBS with non-unit weights) can represent conic sections including circles exactly, but polynomial Bézier curves cannot. However, a single quadrant of a circle can be approximated very accurately by a cubic Bézier curve with control points at (R, kR) and (kR, R) where k ≈ 0.5523. The maximum error of this approximation is about 0.00027R, making it imperceptible for typical display resolutions.
What is degree elevation in Bézier curves?
Degree elevation is the process of representing the same geometric curve with one more control point (and degree), without changing the curve's shape. A linear segment can be elevated to a quadratic, then to a cubic, etc. This is useful in algorithms that require all curves to have the same degree — for example, when merging curves from different sources. The new control points are computed as weighted averages of the original ones, and the process is always exact (no approximation involved).