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

    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

viewport of 200px x 200px

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

OG Twitter logo SVG

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.