Bézier Curve
The smooth curve defined by a handful of control points that underlies fonts, vector drawings, animation easing, and the pen tool in every design app.
A Bézier curve is a smooth curve defined by a small number of control points. The curve starts at the first point and ends at the last, and the points in between pull it toward themselves without the curve passing through them. A quadratic Bézier has one middle control point. A cubic Bézier, the most common kind, has two, which lets a single segment form an S-shape. Longer shapes are built by joining segments end to end, keeping the control points on either side of each joint in line so the curve stays smooth.
The curves come from the French car industry. Paul de Casteljau developed them at Citroën in 1959, but the company kept his work confidential. Pierre Bézier, an engineer at Renault, independently developed and published an equivalent system in the 1960s for designing car body panels, and the curves took his name. De Casteljau's algorithm, which builds a point on the curve by repeatedly interpolating between control points, remains the standard way to evaluate and split them.
They became the basic vocabulary of digital shape:
- Fonts. PostScript Type 1 and OpenType CFF fonts describe letter outlines with cubic Béziers. TrueType uses quadratic ones. Every glyph on screen is a set of curves rasterized at the current size, with spacing adjusted by Kerning and, in a variable font, outlines interpolated between designs.
- Vector drawing. The pen tool in illustration and design apps places Bézier control points directly, and SVG path commands such as
CandQdescribe the same curves. See Vector Graphics. - Animation. Animation software uses Bézier curves to shape how values change over time. CSS's
cubic-bezier()timing function defines Easing with two control points, a staple of Motion Design. - Paths in games. Camera rails, racing lines, and projectile arcs are often Bézier or related spline curves.
Their usefulness comes from a few properties. Moving a control point changes the curve predictably and locally. The curve always stays inside the convex hull of its control points, which makes bounds checks cheap. And curves are easy to split, which renderers use to break them into straight lines fine enough to pass to Rasterization without visible corners or Aliasing.
Related curves handle cases Béziers handle poorly. B-splines and NURBS, used in industrial CAD, keep smoothness automatically across many segments, and Catmull–Rom splines pass through every control point, which suits animation paths through fixed positions. Modern text renderers sometimes convert outlines into a Signed Distance Field or evaluate curves directly in a Shader, so glyphs stay crisp at any zoom.
See also2
Keyframe Animation
Animating by setting a few key poses and letting assistants or software fill in the frames between, the workflow of hand-drawn studios carried into every animation tool and CSS transition.
Graphics & Rendering6 connections
Web Animations API
A browser interface that exposes the engine behind CSS animations and transitions to JavaScript, giving scripts animations they can pause, reverse, seek, and await, while still running smoothly off the main thread.
Web Platform10 connections
Linked from5
- EasingDesign & Interface
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
- Keyframe AnimationGraphics & Rendering
Animating by setting a few key poses and letting assistants or software fill in the frames between, the workflow of hand-drawn studios carried into every animation tool and CSS transition.
- Variable FontsDesign & Interface
A single font file that encodes a continuous design space, letting weight, width, and other axes be set to any value at runtime.
- Vector GraphicsGraphics & Rendering
Images described as shapes and curves rather than a grid of pixels, so they stay sharp at any size, the basis of fonts, icons, logos, and maps.
- Web Animations APIWeb Platform
A browser interface that exposes the engine behind CSS animations and transitions to JavaScript, giving scripts animations they can pause, reverse, seek, and await, while still running smoothly off the main thread.