Bézier curves are elegant parametric curves defined by a small set of control points.
As the parameter \( t \) (ranging from 0 to 1) varies, you trace out the curve in a smooth, continuous way. These curves are used everywhere: in Illustrator or Inkscape when drawing vector paths, in CAD software, in car design, CSS easing functions (cubic-bezier), and even in fonts.
A Brief History
Bézier Curves are named after Pierre Bézier, who published his work on these curves in 1962 while at Renault. In truth, Paul de Casteljau at Citroën also investigated them (starting around 1959), and devised the elegant geometric construction we often use today — though he never formally published those findings. Going further back, these curves fundamentally rely on Bernstein polynomials, first studied by Sergei Natanovich Bernstein in the early 1900s.
The Core Idea: Linear Interpolation (LERP)
At the heart of Bézier curves lies the concept of linear interpolation: the process of finding a point between two endpoints based on some ratio. Suppose we have two points \(\mathbf{P}_1\) and \(\mathbf{P}_2\). If we want a new point that’s, say, 20% of the way from \(\mathbf{P}_1\) to \(\mathbf{P}_2\), we do:
\[ \mathbf{P}(t) \;=\; \mathbf{P}_1 + \bigl(\mathbf{P}_2 - \mathbf{P}_1\bigr) \cdot t, \quad 0 \le t \le 1. \]
- Where \(\mathbf{P}(0) = \mathbf{P}_1\) (with \(t=0\))
- Where \(\mathbf{P}(1) = \mathbf{P}_2\) (with \(t=1\))
This is the linear Bézier curve. Any value \(0 < t < 1\) slides us in a straight line between \(\mathbf{P}_1\) and \(\mathbf{P}_2\).
Higher-Degree Bézier Curves using de Casteljau’s Algorithm
The real power comes from repeatedly applying the idea of interpolation linearly between two points also to the newly emerging points of previous lerps. That’s the essence of de Casteljau’s algorithm.
Quadratic Bézier Curves with 3 control points
- Control Points: \(\mathbf{Q}_0, \mathbf{Q}_1, \mathbf{Q}_2\).
- Step 1: Interpolate between \(\mathbf{Q}_0\) & \(\mathbf{Q}_1\), and separately between \(\mathbf{Q}_1\) & \(\mathbf{Q}_2\): \[ \mathbf{A}(t) = (1 - t)\,\mathbf{Q}_0 + t\,\mathbf{Q}_1, \quad \mathbf{B}(t) = (1 - t)\,\mathbf{Q}_1 + t\,\mathbf{Q}_2. \]
- Step 2: Interpolate again between these new points \(\mathbf{A}(t)\) and \(\mathbf{B}(t)\): \[ \mathbf{Q}(t) = (1 - t)\,\mathbf{A}(t) + t\,\mathbf{B}(t). \]
- Result (after substituting and simplifying): \[ \mathbf{Q}(t) = (1 - t)^2 \mathbf{Q}_0 + 2(1 - t)\,t\,\mathbf{Q}_1 + t^2 \mathbf{Q}_2, \quad 0 \le t \le 1. \]
This is the quadratic Bézier curve: as \(t\) goes from 0 to 1, we trace a smooth path from \(\mathbf{Q}_0\) to \(\mathbf{Q}_2\), “pulled” toward \(\mathbf{Q}_1\).
Cubic Bézier with 4 control points
- Control Points: \(\mathbf{C}_0, \mathbf{C}_1, \mathbf{C}_2, \mathbf{C}_3\).
- Step 1: Interpolate in pairs: \[ \mathbf{A}(t) = (1 - t)\,\mathbf{C}_0 + t\,\mathbf{C}_1, \quad \mathbf{B}(t) = (1 - t)\,\mathbf{C}_1 + t\,\mathbf{C}_2, \quad \mathbf{C}(t) = (1 - t)\,\mathbf{C}_2 + t\,\mathbf{C}_3. \]
- Step 2: Interpolate again: \[ \mathbf{M}(t) = (1 - t)\,\mathbf{A}(t) + t\,\mathbf{B}(t), \quad \mathbf{N}(t) = (1 - t)\,\mathbf{B}(t) + t\,\mathbf{C}(t). \]
- Step 3: Interpolate one more time, between \(\mathbf{M}(t)\) and \(\mathbf{N}(t)\): \[ \mathbf{C}(t) = (1 - t)\,\mathbf{M}(t) + t\,\mathbf{N}(t). \]
- Result (after expanding): \[ \mathbf{C}(t) = (1 - t)^3\,\mathbf{C}_0 + 3(1 - t)^2\,t\,\mathbf{C}_1 + 3(1 - t)\,t^2\,\mathbf{C}_2 + t^3\,\mathbf{C}_3, \quad 0 \le t \le 1. \]
This is the cubic Bézier curve—widely used in design software and CSS because two “internal” control points \(\mathbf{C}_1\) and \(\mathbf{C}_2\) allow for greater shape flexibility.
General Bézier Curve
For \(n+1\) control points \(\mathbf{P}_0, ..., \mathbf{P}_n\), repeating these interpolation steps \(n\) times yields a degree-\(n\) Bézier curve. In closed-form, it is often written as:
\[ \mathbf{C}(t) \;=\; \sum_{i=0}^{n} \binom{n}{i} \, t^i\,\bigl(1 - t\bigr)^{n-i}\, \mathbf{P}_i, \quad 0 \le t \le 1, \]
Here, \(\binom{n}{i}\) are binomial coefficients. Just like the linear, quadratic, and cubic examples, this formula ensures the curve begins at \(\mathbf{P}_0\) when \(t=0\) and ends at \(\mathbf{P}_n\) when \(t=1\). Each “middle” control point contributes a pull toward its position, shaping the path.
The generalized Bézier Curve can now be expressed as a Bernstein polynomial \(B_n^i(t)\), where the Bernstein coefficients are the control points \(\mathbf{P}_i\):
\[\mathbf{C}(t) = \sum_{i=0}^n B_n^i(t)\,\mathbf{P}_i,\quad \text{with} \quad B_n^i(t) = \binom{n}{i} \, t^i \,(1 - t)^{n-i}.\]
Degree Elevation
Quadratic to Cubic
Sometimes we have a quadratic Bézier curve (3 control points) and we wish to represent it as a cubic Bézier (4 control points), but still produce exactly the same curve. To do so, we need to place the two control points in just the right spots.
Consider a quadratic curve: \[ \mathbf{Q}(t) = (1 - t)^2 \mathbf{Q}_0 + 2(1 - t)\,t\,\mathbf{Q}_1 + t^2\,\mathbf{Q}_2. \] Notice that we can multiply it by \((1 - t) + t = 1\) without changing its value:
\[ \begin{array}{rl} \mathbf{Q}(t) &= (1 - t)^2 \mathbf{Q}_0 \;+\; 2(1 - t)\,t\,\mathbf{Q}_1 \;+\; t^2\,\mathbf{Q}_2\\ &= \Bigl((1 - t)^2 \mathbf{Q}_0 \;+\; 2(1 - t)\,t\,\mathbf{Q}_1 \;+\; t^2\,\mathbf{Q}_2\Bigr)\;\cdot\;\bigl((1 - t) + t\bigr)\\ &= (1 - t)^3 \mathbf{Q}_0 \;+\; (1 - t)^2 t\,\bigl(2\mathbf{Q}_1 + \mathbf{Q}_0\bigr) \;+\; (1 - t)\,t^2 \,\bigl(2\mathbf{Q}_1 + \mathbf{Q}_2\bigr) \;+\; t^3 \mathbf{Q}_2. \end{array} \]
Compare this to a cubic Bézier curve:
\[ \mathbf{C}(t) = (1 - t)^3 \mathbf{C}_0 \;+\; 3 (1 - t)^2 t \, \mathbf{C}_1 \;+\; 3 (1 - t)\,t^2 \, \mathbf{C}_2 \;+\; t^3 \, \mathbf{C}_3. \]
Matching terms shows that:
\[ \mathbf{C}_0 = \mathbf{Q}_0, \quad\quad \mathbf{C}_3 = \mathbf{Q}_2, \]
and in order to reproduce exactly the same shape, the two new control points must be:
\[ \mathbf{C}_1 = \tfrac{2}{3}\mathbf{Q}_1 + \tfrac{1}{3}\mathbf{Q}_0 \quad=\quad \mathbf{Q}_0 + \tfrac{2}{3}\bigl(\mathbf{Q}_1 - \mathbf{Q}_0\bigr), \] \[ \mathbf{C}_2 = \tfrac{2}{3}\mathbf{Q}_1 + \tfrac{1}{3}\mathbf{Q}_2 \quad=\quad \mathbf{Q}_2 + \tfrac{2}{3}\bigl(\mathbf{Q}_1 - \mathbf{Q}_2\bigr). \]
General Degree Elevation
In general, a Bézier curve of degree \(n\) can be elevated to a curve of degree \(n+1\), preserving its exact shape. The idea is the same: we rewrite the curve so that it has one extra control point, but the resulting new curve follows the same path.
Suppose we have an \(n\)-th degree Bézier curve:
\[ \mathbf{C}(t) \;=\; \sum_{i=0}^{n} B_{i}^{n}(t)\,\mathbf{P}_{i} \quad \text{with} \quad B_{i}^{n}(t) = \binom{n}{i}\, t^i\,(1 - t)^{\,n - i}. \]
We can split this curve by multiplying it by 1 in the same way as before:
\[ \mathbf{C}(t) \;=\; (1 - t)\,\mathbf{C}(t) \;+\; t\,\mathbf{C}(t). \]
Next, we distribute these factors over the sums defining \(\mathbf{C}(t)\):
\[ \mathbf{C}(t) \;=\; (1 - t) \sum_{i=0}^{n} B_{i}^{n}(t)\,\mathbf{P}_{i} \;+\; t \sum_{i=0}^{n} B_{i}^{n}(t)\,\mathbf{P}_{i}. \]
Each product \((1 - t) B_i^n(t)\) and \(t B_i^n(t)\) can be expressed using the degree-\((n+1)\) Bernstein polynomials:
\[ (1 - t)\,B_{i}^{n}(t) \;=\; \frac{(n+1-i)}{(n+1)} \, B_{i}^{\,n+1}(t), \quad t\,B_{i}^{n}(t) \;=\; \frac{(i+1)}{(n+1)} \, B_{i+1}^{\,n+1}(t). \]
Substituting these identities back in, we get two separate sums that both use degree-\((n+1)\) polynomials:
\[ \mathbf{C}(t) = \sum_{i=0}^{n} \frac{n+1-i}{n+1} \,B_{i}^{\,n+1}(t)\,\mathbf{P}_i \;+\; \sum_{i=0}^{n} \frac{i+1}{n+1} \,B_{i+1}^{\,n+1}(t)\,\mathbf{P}_i. \]
We can then re-index the second sum (shifting \(i+1\) to a new index) and combine them into a single sum from \(i=0\) to \(i=n+1\). This yields:
\[ \mathbf{C}(t) \;=\; \sum_{i=0}^{n+1} B_{i}^{\,n+1}(t) \bigl(\tfrac{i}{n+1}\,\mathbf{P}_{i-1} + \tfrac{n+1 - i}{n+1}\,\mathbf{P}_{i}\bigr). \]
Define new control points \(\mathbf{P}'_i\) for \(i=0,...,n+1\) by
\[ \mathbf{P}'_{i} = \alpha\mathbf{P}_{\,i-1} \;+\; (1-\alpha)\mathbf{P}_{\,i},\quad \text{with} \quad\alpha=\frac{i}{n+1} \]
(Of course, for \(i=0\) or \(i=n+1\), the expressions become zero and as such the term effectively vanishes.)
Finally \(\mathbf{C}(t)\) can be rewritten as:
\[ \mathbf{C}(t) \;=\; \sum_{i=0}^{n+1} B_{i}^{\,n+1}(t)\, \mathbf{P}'_{i}, \]
which is exactly the definition of a degree-\((n+1)\) Bézier curve. Hence, we have elevated the degree from \(n\) to \(n+1\) without changing the curve’s shape—only its control-point representation.
Degree Elevation Calculator
Use the following tool to determine the control points for the degree-\((n+1)\) Bézier curve, given degree \(n\)
Bézier Curve Derivative
To find the derivative of a Bézier curve, remember that the control points \( \mathbf{P}_i \) are constant while the Bernstein polynomials \( B_i^n(t) \) depend on \( t \). For an \( n \)-th degree Bézier curve:
\[ \mathbf{C}(t) = \sum_{i=0}^{n} B_i^n(t) \,\mathbf{P}_i, \]
we only need to differentiate the Bernstein terms:
\[ \frac{d}{dt} \, B_i^n(t) = n \,\Bigl(B_{i-1}^{\,n-1}(t) \;-\; B_i^{\,n-1}(t)\Bigr). \]
Substituting this back into \( \mathbf{C}(t) \), we get:
\[ \frac{d}{dt}\,\mathbf{C}(t) = \sum_{i=0}^n \frac{d}{dt}\Bigl(B_i^n(t)\Bigr) \,\mathbf{P}_i = \sum_{i=0}^n n \Bigl(B_{i-1}^{\,n-1}(t) - B_i^{\,n-1}(t)\Bigr)\mathbf{P}_i. \]
Rearranging the sum shows that each term \( B_i^{\,n-1}(t) \) pairs with \(\mathbf{P}_{i+1} - \mathbf{P}_i\):
\[ \frac{d}{dt}\,\mathbf{C}(t) = n \sum_{i=0}^{n-1} B_i^{\,n-1}(t)\,\bigl(\mathbf{P}_{i+1} - \mathbf{P}_i\bigr). \]
This final expression is itself a Bézier curve of degree \(n - 1\), defined by the \(n\) control points \(\mathbf{P}_{i+1} - \mathbf{P}_i\). In other words, the derivative of a Bézier curve is another Bézier curve—often called the hodograph—that succinctly captures how the original curve’s slope changes with \(t\). For Quadratic and Cubic Bézier Curve this simplifies to the following:
Quadratic Bézier Curve \( \mathbf{Q}(t) \):
- \( \mathbf{Q}'(t) = 2((1-t)(\mathbf{P}_1-\mathbf{P}_0) + t(\mathbf{P}_2-\mathbf{P}_1)) \)
- \( \mathbf{Q}''(t) = 2(\mathbf{P}_2 - 2\mathbf{P}_1 + \mathbf{P}_0) \)
Cubic Bézier Curve \( \mathbf{C}(t) \):
- \( \mathbf{C}'(t) = 3((1-t)^2(\mathbf{P}_1-\mathbf{P}_0) + 2t(1-t)(\mathbf{P}_2-\mathbf{P}_1) + t^2(\mathbf{P}_3-\mathbf{P}_2)) \)
- \( \mathbf{C}''(t) = 6((1-t)(\mathbf{P}_2-2\mathbf{P}_1+\mathbf{P}_0) + t(\mathbf{P}_3-2\mathbf{P}_2+\mathbf{P}_1)) \)