Bezier Curves

The mathematical foundation of smooth curves in computer graphics.

7 min read Popular

Interactive Bezier Playground

Drag the control points to shape the curve.

d="M 100 300 C 150 100, 450 100, 500 300"

What are Bezier Curves?

Bezier curves are parametric curves widely used in computer graphics. Named after Pierre Bezier who used them at Renault for car body design.

Types of Bezier Curves

Linear Bezier (2 points)

Simply a straight line between two points:

\[B(t) = (1-t)P_0 + tP_1\]

Quadratic Bezier (3 points)

One control point creates a smooth curve:

\[B(t) = (1-t)^2P_0 + 2(1-t)tP_1 + t^2P_2\]

SVG command: Q x1 y1, x y

Cubic Bezier (4 points)

Two control points for more complex curves:

\[B(t) = (1-t)^3P_0 + 3(1-t)^2tP_1 + 3(1-t)t^2P_2 + t^3P_3\]

SVG command: C x1 y1, x2 y2, x y

The Parameter t

The parameter \(t\) goes from 0 to 1:

  • \(t = 0\): Start point
  • \(t = 0.5\): Middle of curve
  • \(t = 1\): End point
Note: t = 0.5 doesn't mean the midpoint by arc length. The curve speed varies along t.

De Casteljau's Algorithm

A recursive method to evaluate Bezier curves by repeated linear interpolation:

  1. Connect adjacent control points
  2. Find points at parameter t on each segment
  3. Repeat until one point remains

In SVG Paths

<path d="M 100 300 C 150 100, 450 100, 500 300" />

M 100 300      -- Move to start point
C 150 100,     -- First control point
  450 100,     -- Second control point
  500 300      -- End point

In CSS Animation

CSS uses cubic-bezier for timing functions:

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Common presets */
ease:        cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in:     cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out:    cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

Key Properties

  • Endpoint interpolation: Curve passes through first and last points
  • Tangent at endpoints: Tangent aligns with first/last control segment
  • Convex hull: Curve lies within the convex hull of control points
  • Affine invariance: Transform the points, transform the curve

Applications

  • Vector graphics (SVG, fonts, illustrations)
  • Animation easing curves
  • CAD/CAM design
  • Path planning in robotics
  • Game development
💡

Bézier Curves Explained Simply

Imagine holding a flexible ruler or a piece of string between two hands. Your hands are the endpoints—the curve must pass through them. Now imagine having invisible magnets placed in the air that pull the ruler toward them without touching it. That pulling force shapes the curve, creating a smooth arc between your hands. This is essentially how Bézier curves work: you define fixed endpoints where the curve starts and ends, then use control points that act like those invisible magnets, influencing the curve's shape without the curve actually passing through them.

What makes Bézier curves so useful is their predictability and elegance. Unlike freehand drawing where every tiny movement matters, Bézier curves give you smooth, mathematically perfect shapes with just a few points. Move a control point, and the entire curve adjusts gracefully. This is why every font on your computer, every logo in vector format, and every smooth animation on websites relies on these curves. They're the universal language for describing smooth shapes in the digital world.

The mathematics behind Bézier curves comes down to one simple idea: blending. As you travel along the curve from start to finish, the influence of each control point gradually changes. At the beginning, the start point and its nearby control point dominate. As you progress, the influence shifts toward the end point and its control point. This smooth transition of influence is what creates that flowing, natural-looking curve that would be nearly impossible to achieve by plotting individual points.

In practical terms, when you use the pen tool in design software, adjust an animation's timing curve in CSS, or even watch a car drive smoothly around a corner in a video game, you're witnessing Bézier curves in action. They've become so fundamental that most people interact with them daily without ever knowing their name—a testament to how elegantly they solve the problem of creating and controlling smooth curves.

Frequently Asked Questions

What is a Bezier curve in simple terms?
A Bezier curve is a smooth, curved line defined by a set of control points. Think of it like bending a flexible ruler: you hold the ends (anchor points) and push or pull the middle (control points) to create different curve shapes. The mathematical formula ensures the curve is always smooth and predictable.
What is the difference between quadratic and cubic Bezier curves?
Quadratic Bezier curves use 3 points (start, one control point, end) and create simpler curves. Cubic Bezier curves use 4 points (start, two control points, end) and offer more flexibility, allowing S-curves and more complex shapes. Cubic curves are more commonly used in professional design software and SVG graphics.
Why are Bezier curves used in fonts and typography?
Bezier curves are ideal for fonts because they can be scaled to any size without losing quality, stored with minimal data (just control point coordinates), rendered quickly at any resolution, and edited easily by type designers. TrueType fonts use quadratic Bezier curves, while PostScript and OpenType fonts use cubic Bezier curves.
How do Bezier curves work in CSS animations?
CSS uses cubic-bezier timing functions to control animation speed over time. The four values in cubic-bezier(x1, y1, x2, y2) define two control points that shape how the animation accelerates and decelerates. Common presets like 'ease', 'ease-in', and 'ease-out' are predefined cubic-bezier curves.
What does the t parameter mean in Bezier curves?
The t parameter is a value from 0 to 1 that represents position along the curve. At t=0, you're at the start point; at t=1, you're at the end point. Values in between give you points along the curve. However, t=0.5 doesn't necessarily mean the midpoint by distance—the curve may travel faster or slower at different t values.
Who invented Bezier curves?
Bezier curves are named after Pierre Bezier, a French engineer at Renault who developed them in the 1960s for designing car bodies. However, Paul de Casteljau at Citroen independently developed the same mathematical curves slightly earlier, though his work was kept as a trade secret. Both were trying to solve the problem of precisely describing curved surfaces for automobile manufacturing.
Can Bezier curves create circles or ellipses?
Bezier curves cannot create perfect circles or ellipses—they can only approximate them. A common approximation uses four cubic Bezier curves with a 'magic number' constant (approximately 0.5523) for the control point distances. This approximation is so close that it's visually indistinguishable from a true circle in most applications.
What is De Casteljau's algorithm?
De Casteljau's algorithm is a recursive method to calculate points on a Bezier curve. It works by repeatedly finding the weighted average between adjacent points based on the t parameter. This process continues until only one point remains—that's the point on the curve. It's numerically stable and also used to split Bezier curves into smaller segments.
How are Bezier curves used in SVG graphics?
SVG uses Bezier curves in path elements with specific commands: Q (quadratic) takes one control point and an end point, while C (cubic) takes two control points and an end point. There are also shorthand versions (T and S) that mirror the previous control point for smooth continuations. Most vector graphics in SVG are composed of multiple connected Bezier curves.
What are the practical applications of Bezier curves?
Bezier curves are used in vector graphics software (Adobe Illustrator, Inkscape), font design and rendering, animation and motion graphics, CAD/CAM for manufacturing, game development for paths and trajectories, robotics for smooth motion planning, and web development for SVG graphics and CSS animations. They're fundamental to any application requiring smooth, scalable curves.