We’ve all heard of the Bézier curve. But do we really know how to draw one, how to apply it within applications, how to write it in code, or who discovered the concept? Let’s find out.

The genius of connecting two points by optimizing their control handles

A Bézier curve consists of two nodes with attached control handles. The values of these control handles is used by the computer software to render the curve. Control handles define the shape of a curve on its start- and end points, and can be manipulated by the user within the software.

A simple Bézier curve showing a smooth horizontal tear drop shape.

Who was Monsieur Bézier?

Much is written about the curve pioneer, Pierre Étienne Bézier. In short, Monsieur Bézier lived from 1910 until 1999, and was a distinguished French engineer. He was one of the founders of the fields of solid, geometric and physical modeling, as well as in the field of representing curves, especially in CAD* and production systems. He became an engineer at Renault cars, where he refined, popularized, and patented the concept of the Bézier curve.**

Bézier curves are vector paths, and as such, they are the foundation of geometric design. Bézier curves and Bézier surfaces are used in CAD applications and environments.

Why is the Bézier curve important for designers?

A deeper and more detailed application of the Bézier curve creates smooth and multi-functional designs. Bézier curves allow us to simplify complex vector paths into measurable curves through the handles, thus giving us the potential to generate immediate curve variations.

For instance, if we draw a bird, we can simplify its line shape to a path of 5 nodes, or points, with their respective handles. Each segment between two nodes is a Bézier curve. The manipulation of the handles defines variations of the bird shape.

A shape of a bird drawn in 5 composite Bézier curves. The illustration on the right shows an adaptation of the left-side illustration. By adjusting the handles on some of the nodes, the bird has a rounder body and a fluid feather-like tail.

As the above illustration shows, shapes drawn in Bézier lines are easy to work with and provide fluid lines. Variations of a shape can get rendered swiftly by subtle handle adjustments.

If the node count on a shape remains constant, a vector-based Bézier composite shape becomes the perfect tool in motion design. Motion design programs (After Effects) rely on Bézier curves.

Bézier curves create smooth curves from node to node.

The integration of Bézier curves from static to motion vector designs

Bézier vector curves can easily be animated as paths, provided the number of nodes remain constant. Adjustments of the handles define the shape variations which transition into each other in the animation.

Evolving vector shapes with a constant number of nodes, with adjusted segmented Bézier curves.

Motion design with Bézier curves

In this example, the bird vector shapes get animated in a 5-second loop. The Bézier curves transitions render smoothly and flawlessly.

Figure 1

Variations of the Bézier curve in sequence

Figure 1. A vector animation is composed from variations of bird shapes to create motion. The animation of the bird is set to one position, i.e., it does not have a linear motion.

Bézier curves and the Easy Ease Keyframe Assistant

Easy Ease is a feature integrated into vector-based motion graphic design programs (AE, Xd). By definition, Easy Ease adjusts incoming and/or outgoing velocity of a moving object from either endpoint. Easy Ease function is defined by the Bézier curve principle. A linear motion path, defined as constant movement over time, can get manipulated by adjusting its start- and end point handles, and thus converting it to a Bézier curve. The curve translates motion velocity, either increasing or decreasing the speed at either point.

Easy Ease velocity motion

Figure 1a: Bézier curve motion adjustments

This illustration shows the AE segmented motion path with velocity adjustments between shape segments. The velocity adjustments are rendered as Bézier curves, and help visualize the velocity settings. Adapted from Adobe After Effects.

Shape velocity between shape segments is adjusted through the Bézier curve time adjustments. The movement of the bird is rendered more organic and fluid.

Figure 1b: No motion adjustments

In contrast, if segmented motion time is not adjusted, then the motion path is linear. This would render the bird’s movement without any velocity nuances.

This illustration shows the AE continuous motion path without any velocity adjustments between shape segments. Adapted from Adobe After Effects.

Why are Bézier curves important for velocity and time values?

Figure 2

Animation of bird moving from right to left on a constant/linear time path

Figure 2. The bird moves from right to left in a straight line, motion time is linear, i.e. no Easy Ease velocity is applied to motion.

Figure 2 shows the bird moving across without any time velocity, the motion is a constant movement from right to left.

Figure 3

Animation of bird moving from right to left on an Easy Ease velocity path

Figure 3. The bird moves from right to left in a slight downward curve, motion time has an applied Easy Ease velocity curve. The movement is faster at the start, and slows down as the bird moves across to the left.

In Figure 3, the bird moves at an increased speed at the start of his flight path and slows down midway, to slowly move out of the frame. The position path is also slightly adjusted to render the bird’s flight path on a slight downward curve.

Figure 3a: The Easy Ease motion time rendered as a Bézier curve for Figure 3

The node on the left shows a quick ascent representing increased time velocity at the start of the path, whereas the node on the right shows the slowing down time. Adapted from Adobe After Effects.

Quantifying Bézier curves

Bézier curves have become an integral part of vector-based design applications. There are a number of excellent website applications that let you test your velocity Bézier curve.

The cubic motion Bézier curve comparison app

The cubic-bezier.com, by Lea Verou, is an applet that compares different Bézier handle values in a cubic format (curve inset on left) to a linear curve. The results are immediately visible in the Preview & Compare section. The applet also translates the values into numeric values (i.e., 0, 0, .2, 1 for ease-out curve below) in JSON values.

This is extremely helpful to preview velocity visuals.

The cubic-bezier.com applet creates a preview of an ease-out Bézier curve compared to a linear path. The handles in the curve example on the left are adjustable to create variations. Adapted from cubic-bezier.com.In this cubic-bézier.com example, a preview of an ease-in-out Bézier curve is compared to a linear path. The handles in the curve example on the left are adjustable to create variations. Adapted from cubic-bezier.com.

Explore this applet for your own Bézier curve handle settings!

The Bézier curve simulator app

Another excellent tool for testing Bézier curve shapes is the Bézier Curve Simulatorby Tim Holman. This simulator allows for multiple nodes in linear paths to form a shape. It renders a simulation of Bézier curve variations.

The Bézier curve calculator

The Curve Calculator by desmos is an impressive applet for calculating numeric values as complex graphic paths. Try it.

In summary

Bézier curves are excellent design elements that are easy to edit while maintaining their smoothness.

Bézier curves are integrated into vector programs, thus forming the basis for transitioning from static to motion design.

There are many helpful online applets that formulate the mathematics of a Bézier curve. For designers, these numeric formulations provide quick translation to velocity curves or precise graphic curves.

Give your Bézier curves all your attention in your next project, you won’t regret it.

All illustrations/animations © Eva Schicker 2021, unless otherwise noted.

Footnotes:

* CAD = Computer Aided Design, ie, graphic design and 3-D application software, coding, and motion design software

** Bézier popularized but did not actually create the Bézier curve. The curves were first developed in 1959 by Paul de Casteljau using de Casteljau’s algorithm, a numerically stable method to evaluate Bézier curves. Bézier distinguished himself by using such curves to design automobile bodies at Renault.

Read more about UX/UI design tools here:

The UX Collective donates US$1 for each article published on our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.