If you are at all interested in SVG or Bézier curves, you’ve probably seen something like Jason Davies’ animation. I found that those animations are an excellent way of intuitively grasping how Bézier curves work. However, the math behind it all is less intuitive.

I just read this really illuminating article.

Something I hadn’t realized before reading the article is that, mathematically, Bézier curves are not defined as run-of-the-mill functions. Whereas generally one would plug an `x`

value into a function to determine a `y`

value, à la `f(x) = y = ax + b`

, Bézier curves are defined *parametrically*. The values of `x`

and `y`

are determined independently, according to a third parameter, dubbed `t`

.

This is the general formula for a cubic Bézier:

B(t) = (1-t)^{3}·P0 + 3·(1-t)^{2}·t·P1 + 3·(1-t)·t^{2}·P2 + t^{3}·P3

where `P0`

and `P3`

are the start and end points, and `P1`

and `P2`

are the first and second control points.

This actually means:

x = (1-t)^{3}·P0_{x}+ 3·(1-t)^{2}·t·P1_{x}+ 3·(1-t)·t^{2}·P2_{x}+ t^{3}·P3_{x}y = (1-t)^{3}·P0_{y}+ 3·(1-t)^{2}·t·P1_{y}+ 3·(1-t)·t^{2}·P2_{y}+ t^{3}·P3_{y}

So, plugging the same `t`

value into both functions will give you an `x`

and a `y`

, i.e. one coordinate for a point on the Bézier curve with said values for `P0`

,`P1`

,`P2`

, and `P3`

.

So, what is `t`

?

t ∈ [0,1]

Simply speaking, `t`

goes continuously from 0 to 1, and, at each value, it generates a new set of coordinates.

Here’s what the path `M0 200C0 0 100 0 100 200`

looks like:

If you interpret `t`

as increasing over time, what you get is that black dot - its `x,y`

coordinates represent the values of x and y generated by the current value of t in the parametric equation.

Parsing out that path into the constants in the parametric equation you get:

```
P0 = (0,200); // start point
P1 = (0,0); /// first control point
P2 = (100,0); // second control point
P3 = (100,200); // end point
```

Since `t`

is continuous over `[0,1]`

, the parametric equations produce an infinitely dense set of coordinates. Those coordinates are what define the curve.

The following animation, depicting the path `M0 200C100 50 400 300 500 200`

, demonstrates which `x,y`

(the coordinates of the black dot) result from which value of `t`

.