# Bézier Curves

#### Article by Richard Ekwonye

Bézier curves have been a recurring theme in my frontend engineering career. I have used them extensively in my work - in animations and SVG paths of illustrations and icons. However, I only recently took an interest in understanding the underlying logic that governs their behaviour. This demystified curve-related path commands for me and gave me a deeper understanding of web animations. In this article, I’ll share my interesting findings on Bézier curves.

In CSS animations, easing functions specify the rate of change of a property over time. There are 3 types of easing functions - Linear, Step and Cubic Bézier.

• 101

#### Linear Easing

Linear is typically used to animate properties at a constant rate/speed.

• 101

#### Step Easing

Step is used to animate properties at equal time intervals.

• 101

#### Cubic Bézier Easing

Cubic Bézier is used to animate properties at variable rate/speed.

Predefined CSS easings like `ease`, `ease-in`, `ease-out` and `ease-in-out` as well as commonly used smooth easings like ease in sine and ease in cubic are examples of cubic Bézier easing functions. Custom easings can also be generated with cubic Bézier easing functions.

Presets
101
Value
0.42, 0, 1, 1

#### Bézier curve preview

Easing functions in CSS compute how an animation accelerates and decelerates. This generated animation path can be represented in an easing graph where the x-axis is animation progress and the y-axis is degree of change. The cubic Bézier easing function has fixed anchor points at `(0, 0)` and `(1, 1)` which correspond to the animation’s start and end points. The curve that defines the animation’s smooth acceleration and deceleration is set by the 2 control points in the `cubic-bezier(<x1>, <y1>, <x2>, <y2>)` function. By setting these control points to the same values as the fixed anchor points `cubic-bezier(0, 0, 1, 1)`, the cubic Bézier easing function can be used to generate a linear path animation.

Similar to CSS animations, visual elements have linear and curved paths. Several connected Bézier curves are used to add curves to simple and complex shapes found in fonts, icons, illustrations, data visualization charts, 3d objects and other visual elements. Whilst straight lines are defined by only start and end points, Bézier curves are defined by one or more handle points, in addition to a start and an end point. The degree or highest exponential of a Bézier curve equation determines the number of points. As their names would imply, quadratic Bézier curves have a degree of 2 (3 points) and cubic curves have a degree of 3 (4 points).

• p0p1p2

Quadratic Bézier has 3 points - `p0`, `p1` and `p2`. `p0` and `p2` are anchor points, `p1` is the only control point.

• p0p1p2p3

#### Cubic Bézier

Cubic Bézier has 4 points - `p0`, `p1`, `p2` and `p3`. `p0` and `p3` are anchor points, `p1` and `p2` are control points.

In connected Bézier curves, there are often two handles that extend out of a control point. These handles give precise control of the curve’s direction.

#### Bézier Handles

The angle and length of Bézier handles can be mirrored, asymmetric, or even disconnected to define the desired shape. Each of these modes results in a different behaviour for the connected points.

Design tools such as Photoshop and Figma offer the flexibility to switch between these handle modes, allowing users to quickly create more complex shapes and patterns.

When mirrored, the angle and length of the handles are always symmetric allowing the connected curves to remain smooth in most cases.

SVG paths and HTML canvas can be used to draw smooth curves on the web. They both have quadratic and cubic Bézier curve commands and functions. For the rest of this article, I’ll be focusing on cubic Bézier curves in SVG.

The SVG `path` element is used to create complex shapes. A `path` is defined by its `d` attribute which contains commands that instruct how it’s drawn in the viewport. Curved paths can be drawn with the `Q` (quadratic) or the more complex `C` (cubic) command. The cubic command `C x1 y1, x2 y2, x y` takes 3 points - `p1`, `p2` and `p3`. `p0` is always the end point of the previous command in the `path`.

xy0200200

#### SVG viewport

The SVG viewport, set by the `width` and `height` attributes, defines the bounds of an SVG.

In a viewport of `200` x `200`, a path with `d` attribute - `M C , , ` generates a curve that starts at `()` and ends at `()`.

Shapes outside the viewport are usually hidden but can be exposed by setting the SVG overflow to visible.

Complex vectors are created with a combination of paths and other SVG elements. Individual paths often contain several connected cubic Bézier curves. This is common for icons, logos and illusrations.

0400400

While trying to understand how points along Bézier curve paths are derived, I learnt that the Bézier curve - which is named after a French engineer, Pierre Bézier - was used in the 1960s to design curves for the bodywork of Renault cars. There are several methods of obtaining the points in a Bézier curve, but my favourite is De Casteljau’s Algorithm, briefly explained below.

Let’s start by deriving points on straight lines between the start point `p0` and end point `p1`. Each point has corresponding x-axis and y-axis values and the progression of the line can be denoted by `t`, a value between `0` (start) and `1` (end). We get the coordinates of a point along the straight line at any given value of `t` using the linear interpolation function -

`lerp(p0, p1, t) = p0 + (p1 - p0) * t`

For a line between `p0` at `(0, 0)` and `p1` at `(0, 30)`, the midpoint i.e `t = 0.5` is `(0, 15)`, which is a result of `0 + (0 - 0) * 0.5 = 0` and `0 + (30 - 0) * 0.5 = 15`.

Just like straight lines, Bézier curves’ progress can be defined by `t` . Using De Casteljau’s Algorithm, we can get the cubic Bézier curve path’s point coordinates at `t`.

`p4 = lerp(p0, p1, t)``p5 = lerp(p1, p2, t)``p6 = lerp(p2, p3, t)``p7 = lerp(p4, p5, t)``p8 = lerp(p5, p6, t)``bt = lerp(p7, p8, t)`

We do this by performing a nested linear interpolation on the linear interpolation function outputs of the cubic Bézier curve control and anchor points.

#### Interactive curve graph

0400800
0400
`p0` is the start point of the curve.`p1` is the first control point of the curve.`p2` is the second control point of the curve.`p3` is the end point of the curve.`p4` is the linear interpolation between `p0` and `p1`.`p5` is the linear interpolation between `p1` and `p2`.`p6` is the linear interpolation between `p2` and `p3`.`p7` is the linear interpolation between `p4` and `p5`.`p8` is the linear interpolation between `p5` and `p6`.`bt` is the point on the curve at a given progress. This this the final linear interpolation between `p7` and `p8`.

Learning about the logic behind Bézier curves led me to experiment more with SVG paths and cubic Bézier easing functions which I applied in building interactive components for this article. This knowledge has unlocked creative possibilities for me, and I hope this inspires you to create your next fun piece.