# Math of Bézier Curves

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)·t2·P2 + t3·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·P0x + 3·(1-t)2·t·P1x + 3·(1-t)·t2·P2x + t3·P3x

y = (1-t)3·P0y + 3·(1-t)2·t·P1y + 3·(1-t)·t2·P2y + t3·P3y
```

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`.