A Bézier curve is a smooth, mathematically defined curve shaped by a set of control points. It’s the foundation of nearly every curve you see on a screen, from the letters in this sentence to the swooping lines in a logo to the way an animation eases between keyframes. Pierre Bézier developed the concept in the 1970s while working at Renault, where he needed a precise way to describe the curved surfaces of car bodies for computer-aided design.
How Control Points Shape the Curve
A Bézier curve is defined by a starting point, an ending point, and one or more “control points” in between. The curve doesn’t pass through the control points. Instead, they act like magnets, pulling the curve toward themselves without the curve ever touching them. The start and end points are called anchor points, and the control points are often visualized as handles extending from those anchors.
The simplest useful Bézier curve has three control points (a quadratic curve) and produces a single smooth arc. Add a fourth point and you get a cubic curve, which can form an S-shape or a more complex bend. Cubic Bézier curves are by far the most common in practice because they offer enough flexibility to describe almost any smooth shape while remaining easy to manipulate.
If you’ve ever used the Pen tool in Photoshop, Illustrator, or Figma, you’ve worked with Bézier curves directly. Each click places an anchor point, and dragging from that anchor extends a pair of handles that control the curve’s direction and steepness. Converting a smooth point to a corner point, or adjusting a single handle independently, lets you transition between curved and straight segments in one continuous path.
The Math Behind the Curve
A Bézier curve is a parametric curve, meaning it’s calculated by sweeping a single value (called t) from 0 to 1. At t = 0 you’re at the first anchor point; at t = 1 you’re at the last. Every value of t in between gives you a point somewhere along the curve. The position at each t is a weighted blend of all the control points, and those weights come from a family of equations called Bernstein polynomials.
For a cubic Bézier curve with four control points (p0 through p3), the formula works out to:
B(t) = (1-t)³·p0 + 3t(1-t)²·p1 + 3t²(1-t)·p2 + t³·p3
Each term is a blend factor that starts large and shrinks (or vice versa) as t moves from 0 to 1. At the start, the (1-t)³ term dominates, so the curve sits near p0. As t increases, the other terms take over, pulling the curve toward p1 and p2 before it arrives at p3. The result is a perfectly smooth path with no sharp corners.
Building Points the Geometric Way
There’s an elegant visual method for finding any point on a Bézier curve without plugging numbers into a formula. It’s called de Casteljau’s algorithm, and it works by repeated interpolation, which is a fancy way of saying you find midpoints (or partial-way points) over and over.
For a quadratic curve with three points, here’s how it works at some value of t (say, t = 0.5, the halfway mark). First, find the point that’s 50% of the way between p0 and p1. Then find the point that’s 50% of the way between p1 and p2. Now you have two new points. Find the point 50% of the way between those two, and that final point lies exactly on the curve. For a cubic curve, you do the same thing but with one extra round of interpolation, starting with four points, reducing to three, then two, then one.
This algorithm matters because it’s numerically stable and fast enough for real-time graphics. It’s also useful for splitting a single Bézier curve into two smaller ones at any point, which is how software subdivides curves for rendering.
Where Bézier Curves Appear
Vector graphics are the most visible application. Every path in an SVG file is built from Bézier curve commands. The SVG path specification includes a “C” command for cubic curves (specifying two control points and an endpoint) and an “S” command for smooth continuation, where the first control point is automatically mirrored from the previous segment. This is how vector illustrations scale to any size without becoming pixelated: the curves are recalculated at whatever resolution you need.
Fonts rely heavily on Bézier curves too, though different font formats use different types. TrueType fonts use quadratic Bézier curves (three control points per segment), while PostScript and CFF-based OpenType fonts use cubic curves. Most font designers prefer working with cubic curves because they offer more intuitive control over complex letterforms. Both types live under the OpenType umbrella today, so a .otf file could contain either kind.
In animation and motion design, cubic Bézier curves define easing functions. When you see a button that accelerates gently into motion and decelerates before stopping, that timing is controlled by a Bézier curve where the x-axis represents time and the y-axis represents progress. CSS transitions use this exact system: the “ease-in-out” keyword corresponds to a specific set of four control points.
Game development, robotics, and CAD software all use Bézier curves for path planning, camera movement, and surface modeling. When curves need to extend beyond what a single cubic segment can handle, designers chain multiple Bézier curves end to end, matching their handles at the joints to maintain smoothness. This creates what’s called a spline.
Key Properties That Make Them Useful
Bézier curves have several built-in properties that make them practical for computation and design. The curve always starts at the first control point and ends at the last one, which means you can guarantee exact endpoints. At the start of the curve, the direction matches the line between the first and second control points. At the end, it matches the line between the second-to-last and last control points. This predictability is why linking multiple Bézier segments together seamlessly is straightforward: just make the handles on either side of a shared anchor point line up.
The entire curve is always contained within the convex hull of its control points, which is the smallest shape you’d get by stretching a rubber band around all of them. This means the curve can never wildly fly off in an unexpected direction. For software, this property is valuable because it provides a quick bounding area for collision detection, clipping, and intersection testing without computing every point on the curve first.
Bézier curves are also affine invariant. If you need to rotate, scale, or move a curve, you only need to transform the control points. The curve recalculates correctly from the new positions, which keeps operations fast and simple.
Limitations Worth Knowing
A single Bézier curve can’t represent a perfect circle. It can approximate one closely (a cubic Bézier segment can match a quarter-circle arc with a maximum error of about 0.027%), but the math of Bernstein polynomials simply can’t produce a true circular arc. In practice, four cubic segments are used to approximate a full circle, and the result is close enough that no human eye can tell the difference.
Higher-degree Bézier curves (those with many control points) become difficult to control because moving any single point affects the entire curve. This is why most real-world applications stick with cubic curves and chain them together into splines rather than increasing the degree. The tradeoff is more segments to manage, but far more intuitive local control over the shape.