The birth of Bézier curves and how it shaped graphic design

Without the discovery of the Bézier curve, we would not be able to draw curves on a computer.

This mathematical equation led to the creation of computer software that profoundly changed how graphic design was done. Find out how the Bézier curve revolutionized various fields, including animation and robotics.

The term “Bézier curve” sounds complex and scary, right? But don’t worry—you've likely used these curves many times without even realizing it. That’s right. If you’ve ever crafted something in Adobe Illustrator or Photoshop, you’ve used Bézier curves to construct the different shapes you want in your design.

In short, a Bézier curve is a mathematical function that tells computer software to produce specific shapes for illustrations and lettering, among other things. This algorithm allows for the creation of smooth, accurate depictions, which makes the technology applicable in various fields, such as graphic design, engineering, robotics, animation, and more.

With this one breakthrough, a new era in art language was born. And to truly appreciate the scope of its impact, you need to hear the entire tale. We'll take you through the origin story of Bézier curves, followed by a discussion of what they are and how they can be applied in different industries.

We’ll begin by traveling back to a time before computers.

Bernstein: the beginning of the Bézier curve

How did engineers model the objects they wanted to create before computers? They used something called a spline.

A spline was a long, flexible piece of plastic or wood with a rectangular cross-section. The spline was held in place by grounding it against a drawing board with heavy lead weights that had protrusions called ducks. The spline would then mold itself based on where the ducks kept it fixed. Moving the ducks meant altering the shape of the spline.

View this post on Instagram

A post shared by Clark Kellogg (@clark_kellogg)

Obviously, this proved to be a less-than-perfect technique, especially in terms of accuracy. Just think about it. Engineers had to record the duck positions as precisely as possible, and they often had to spend a significant amount of money on the drafting equipment needed to design complex parts that took up space. Mathematically, this approach also fell short because there was no closed-form solution when it was analyzed.

All-in-all, not the best approach, but at this point, it wasn’t possible to model objects using computers. And even once computers came into the picture, a way to draw curves still needed to be found.

When we draw 2D or 3D objects, they're made up of straight lines and curves. And while drawing straight lines is easy enough using a computer, the curves are tricky. We can draw curves easily enough freehand, but drawing them on a computer is another ballgame.

You need a mathematical function that tells the computer how to draw them. The first breakthrough that opened the path to figuring this out came from Sergei Natanovich Bernstein.

In 1912, he developed the mathematical concept of smoothly curved polynomials. A polynomial is an expression of more than two algebraic terms and, more specifically, the sum of several terms containing different powers of the same variable, such as x1 and x2.

Unfortunately for Bernstein, he didn’t have access to the computational power required to show how his mathematical function could be applied to solve real-world problems. As a result, his discovery would not see the light of day until the 1960s.

By this time, computers had become a standard tool used in manufacturing, such as the automobile industry. And it was here that a new problem arose that demanded a computational solution. Two people were in the right place at the right time—a mathematician named Pierre Bézier and an engineer named Paul de Casteljau.

Pierre Bézier was working at Renault, and de Casteljau worked at Citroën. The problem they were aiming to solve was finding new ways of making cars more fuel efficient. This led both men to Bernstein’s smoothly curved polynomials to investigate how they could alter the car's body.

They each wrestled with the problem independently. De Casteljau was the first to combine the mathematical basis function Bernstein had introduced with Computer Aided Design (CAD) to model a smooth, curvy automobile chassis.

De Casteljau discovered this application in 1959, but unfortunately, Citroën would not allow him to patent it or publish the findings. Renault was more giving, so when Pierre Bézier arrived at the same conclusion, he was permitted to patent and publish his results in the early 1960s. And that's how this mathematical function was named the Bézier curve.

The mathematical equation for the Bézier curve looks like this:

Let’s explain in more detail why this equation is so valuable.

What is a Bézier curve?

And how does it solve the curve conundrum?

With one simple mathematical function, Pierre Bézier revolutionized digital design. His Computer-Aided Geometric Design (CAGD) tool was called UNISURF, enabling designers to draw smooth, precise curves on a computer screen. Learn more about CAGD from Morgan Kaufmann’s excellent discussion in Curves and Surfaces for CAGD: A Practical Guide.

But before we continue the story of how Bézier curves took the world by storm, it’s important to come to grips with what a Bézier curve is and how it works.

If we want to represent a smooth curve on a computer screen, we need to find a way to approximate its shape. When you take a very close look at an LCD screen, you can see the tiny squares that make up the outline of the images. So, everything we create in computer graphics is only an approximation.

A Bézier curve can approximate the shape of a curve because it's a form of a parametric function that consists of a set of control points. Two of the points represent each end of the curve, while the third one establishes the shape of the curve.

A parametric curve is generated using linear interpolations. All this means is “picking a point between two points.” Once you've pinpointed the curve's origin and endpoint, you can situate the third point to create the shape of the curve. By altering the control points, you alter the entire curve.

For example, if you place the third point 30% away from the origin and 70% away from the endpoint, you can easily compute what the shape of your curve will be, and if you move the third point in any direction, this will change the entire curve.

The curve on your computer screen is the output of a mathematical function, namely a Bézier curve, and this algorithm tells the computer what to do given specific inputs.

By “function,” we mean the formula that gets us to a single output based on any number of inputs. The function ultimately yields the lines we see on our computer screens. For the purposes of design, we need a function that could quickly be computed to produce a line.

Bézier curves are parametric functions that “cheat” insofar as they use more than one function to generate multiple values. They do this by linking the values to a “control” variable. Let’s unpack this more carefully.

The math behind Bézier curves

Bézier curves are characterized using the same base function for all its output values. In other words, they use the “binomial polynomial” for both x and y outputs. Remember, polynomials look like this:

Polynomials with x3 as the highest order term are “cubic” polynomials, and if it’s x2, we have a “square” polynomial. If it’s x, we call it a line.

Bézier curves are polynomials of t, as opposed to x, and the value for t is fixed between 0 and 1. Coefficients a, b, etc., then take the “binomial” form like so:

What makes the Bézier curve such a profound development in digital art is that it is both simple and versatile, providing graphic designers with a way to achieve curve control by altering curve forms as they see fit.

You can create basic curves and build more complex ones by linking numerous Bézier curves to produce a single curve. This enables graphic designers to achieve the curve complexity required for their designs.

Bézier curves are interesting because we can view them through one of two lenses. The first allows us to see them using “real math,” where we unpack the curve based on its derivatives, functions, etc. This involves looking at the curve through its polynomial functions.

The second lens allows us to view the curve in terms of interpolations. This means we're looking at the “mechanical” composition, which reveals that a curve won’t go beyond the points used to create it.

Now that you have a deeper mathematical grasp of Bézier curves, we can go back to our story of how Bézier curves ultimately entered mainstream graphic design following its birth in France’s automobile industry.

From creating cars to perfecting print

How Bézier curves changed graphic design

The Xerox Palo Alto Research Center aimed to modernize the traditional office space to create a workspace for the future. They proposed using computer programs and industry-invented networks, text editors, and laser printers. Their one blind spot was a lack of motivation to develop computer graphics.

To the frustration of two of their employees—John Warnock and Charles Geschke—Xerox had no interest in developing a new controlled printing graphics language that could be commercialized. So, in 1982, these two computer scientists left Xerox PARC to start their own company called Adobe. Sound familiar?

Their first creation was a technology called PostScript. With this universal language, printers could now interpret text documents to print the right content. The language wasn’t based on bitmaps, as it was grounded in control points connected by an algorithm to produce smooth curves. Their software used Bézier curves to generate lettering that was precise and polished.

Adobe’s use of Bézier curves to represent text lettering changed the graphics landscape forever. The text in digital documents could be stretched, squashed, or made big or small for the first time. PostScript was released in 1985 via Apple’s Laser Printers and was the beginning of bringing a universal graphics language to the world.

However, as PostScript was still a graphics language, you had to be a computer programmer to create the graphics. As such, Adobe started working on a product with a drawing interface that used PostScript code.

Because PostScript was based on curves and vectors, the user had to click on the drawing interface to create anchor points, then drag to set the control point that would define each curve.

All these efforts led to the creation of Adobe Illustrator, a technology that opened up much more than digital type design.

Suddenly, graphic design was no longer the cumbersome analog process it used to be. Graphic designers had always done everything by hand, which was enormously time-consuming and included additional efforts such as refilling, maintaining, and handwashing their Rapidograph pens.

Warnock’s wife, Marva, was a trained graphic designer who wanted to solve the problems those in her field faced every day. She wanted to make it easy for graphic designers to create perfect curves, radical corners, and differing stroke sizes. And Warnock was determined to take this discipline from doing everything by hand to doing it through a computer program. Adobe Illustrator was the answer.

The print industry welcomed this new technology with open arms, recognizing that this new way of drawing to create illustrations, print ads, and covers would be faster and cheaper. Tasks that initially involved the perfect stroke of a French Curve could now be created with only two clicks of a computer mouse.

Adobe Illustrator successfully combined fine art tools with an accessible and affordable way of creating art. This made graphic art production less time-consuming and more accessible, allowing an influx of fresh blood and ideas to the graphic design industry.

Bézier curves changed graphic design forever. So, what are all the different Bézier curves you can use to create designs? Let's get technical!

Different types of Bézier curves

As we’ve seen, Bézier curves approximate real-world shapes that lack a mathematical representation or shapes with unknown or too-complex representations.

A Bézier curve comprises a minimum of three points: the origin, endpoint, and at least one control point. It also allows for as many control points as necessary, though it must be noted that the evaluation increases in complexity when you have higher-degree curves.

A more complex Bézier curve can also be constructed out of several low-degree Bézier curves, and the most common form is the cubic Bézier curve. You can create something called Bézier splines by combining numerous curves and even generalizing to higher dimensions to create Bézier surfaces. The Bézier triangle is one such instance.

(null)

(null)

The control points are represented by P0 through to Pn, depending on how many there are. In this equation, n stands for the order of the curve, where n=1 is linear, n=2 is quadratic, and n=3 is cubic. Affine combinations are where the sum of the coefficients is 1.

Let’s briefly cover the different curves you might use.

The linear Bézier curve

With two distinct points, P0 and P1, a linear Bézier curve is a straight line between these two points. The curve is represented as:

It is equivalent to linear interpolation.

The quadratic Bézier curve

With three distinct points, P0, P1, and P2, a quadratic curve is a path that results based on function B(t). It is represented as follows:

The quadratic curve can also be interpreted as the linear interpolant of the points on the linear Bézier curves that correspond from P0 to P1 and P1 to P2, respectively. This ultimately yields the derivative of the Bézier curve with respect to t like so:

And the second derivative of the Bézier curve with respect to t looks as follows:

The cubic Bézier curve

With four distinct points, P0, P1, P2, and P3, a cubic curve is the path that results based on function B(t). It is represented as follows:

The cubic curve can be represented in a higher-dimensional space and defined as an affine combination of two quadratic curves.

There are also different ways of defining Bézier curves. A recursive definition expresses the Bézier curve of degree n through linear interpolation – a point-to-point linear combination of two corresponding points in two Bézier curves of degree n - 1. An explicit definition continuously extends t0 and (1-t)0 to be 1 throughout [0,1].

An interesting feature of Bézier curves is that they can’t form an exact curve if it’s located at a fixed offset from another Bézier curve. This fixed offset is also called a parallel curve, as it’s parallel to the original curve. However, heuristic methods can produce close approximations if required for practical purposes.

In the domain of vector graphics, you can paint two symmetrically distanced offset curves, which is called stroking. So, suppose you want to convert fonts defined in Metafont (a description language for rendering raster fonts). In that case, you can convert offset curves to filled Bézier contours by stroking the Bézier curves. PostScript Type1 fonts only need you to fill a contour delineated by Bézier curves.

Another type of Bézier curve is a rational curve, which is useful as it can closely approximate arbitrary shapes by adding adjustable weights. The denominator is a weighted sum of Bernstein polynomials, and the numerator is a weighted Bernstein-form Bézier curve. These curves are often used to represent circular arcs.

It should also be noted that Catmull-Rom curves are different from Bézier curves. They differ in terms of what the points mean, even though Bézier and Catmill-Rom curves appear very similar.

Applications of Bézier curves

Since Bézier curves enable graphic designers and engineers to model real-life objects, their applications are plentiful and incredibly valuable. Let’s go through some of them.

Computer graphics

Bézier curves enable us to model smooth curves since the curve is contained in the convex hull created by the control points. You can then apply affine transformations to the curve, such as rotation and translation, by applying these transforms to the control points.

The most commonly used Bézier curves are quadratic curves and cubic curves because higher-degree curves are more computationally expensive to evaluate. These are used to create simple shapes.

But by stringing together low-order Bézier curves, you can create a composite Bézier curve that looks like a single curve but provides the curve complexity necessary for producing more complex shapes. These are referred to as poly-Bézier curves.

Vector graphics standards like .svg, vector graphics languages such as PostScript, and vector graphics programs such as Adobe Illustrator, Linearity Curve (formerly Vectornator), CorelDraw, Artline, Inscape, Timeworks Publisher, and Allegro make use of composite Bézier curves.

The most straightforward way of scan converting (rasterizing) a Bézier curve is to evaluate many closely spaced points, then take this sequence of line segments and scan convert it. However, if the points are spaced too far apart, the rasterized output may not be smooth enough.

A widely used adaptive method is recursive subdivision. With this method, you check the curve’s control points to see if the curve approximates a straight line. If it doesn’t, you parametrically subdivide it into two curve segments and use the same technique recursively on each half. Mathematically speaking, you can also use forward differencing methods, which require error propagation analysis.

Metafont uses the rasterization algorithm, which relies on quadratic equations to discretize the curve. A modified curve form of Bresenham’s line drawing algorithm can perform rasterization by subdividing the curve into rational pieces.

You can learn more about Metafont by reading Addison Wesley’s excellent discussion of implementation details in Donald Knuth’s Metafont: The Program.

Fonts

As we’ve seen, Bézier curves made their debut in the design world via printers because they massively impacted the quality and accuracy of lettering.

For example, TrueType fonts use composite Bézier curves made up of quadratic curves. Other languaging and imaging tools such as PostScript, Asymptote, Metafont, and .svg use composite Bézier curves composed of cubic curves to draw curved shapes. OpenType fonts use cubic and quadratic curves, depending on which technology governs the OpenType wrapper (the encoding that tells the system how to handle the font).

And the “smooth curve” feature of charts in Microsoft Excel uses an algorithm to split all Bézier curves recursively until the curve is flat enough to be drawn as a series of linear or circular segments.

It’s worth noting that Bézier curves can't represent arcs of circles and ellipses to an exact degree, so they're initially approximated by Bézier curves, which are then approximated by arcs of circles. This approach is inefficient because there are also approximations of all Bézier curves using arcs of circles or ellipses that are incrementally created based on arbitrary precision.

So, another approach is to precisely convert all Bézier and conic curves (or surfaces) into NURBS (Non-Uniform Rational Basis Spline), which can be created incrementally without the need first to split the curve recursively to satisfy the flatness condition. This approach is superior as it preserves the curve definition under all linear or perspective 2D and 3D projections and transforms. Modern hardware graphics adapters commonly use this technique with accelerated geometry.

Animation

Applications such as Synfig use Bézier curves to outline movement. Users lay out the desired path in Bézier curves, and the application generates the requisite frames for the object to move along the path.

This is how motion designers and animators produce the “feel” or “physics” they're looking for. The Bézier curve doesn’t only control where the object moves but also specifies the velocity over time of the movement. If an icon needs to move from point A to point B, the designer will use a Bézier curve to smooth the cursor trajectory and set the speed of the movement.

This is immensely important when depicting movement so the user doesn’t experience any jerkiness or blurriness. In video editing, it’s crucial to execute zooms and pans of the camera when the scene is being shot or during post-production.

In 3D animation, Bézier curves are often used to define 3D paths and 2D curves for keyframe interpolation. Bézier curves are now frequently used to control animation easing in CSS, JavaScript, JavaFX, and Flutter SDK. They make a difference in text and tilting animation, as there are times when videographers need to animate the text for effect.

You can learn more about Bézier curves in the context of 3D surfaces by reading Paul Bourke’s Bézier Surfaces (in 3D).

Robotics

Bézier curves are also used in robotics to produce the trajectories of an end-effector. This is because the control polygon can indicate whether the path collides with any nearby object or obstacle, which is essential for a machine that can navigate the physical world.

Joint space trajectories, which are used to smooth the movements of robotic hardware, can also be accurately differentiated using Bézier curves. As such, the derivatives of joint space trajectories are used to calculate the dynamics and control effort (torque profiles) of the robotic manipulator (AKA robotic arms).

Design software that use Bézier curves

As you can see, discovering the Bézier curve was a massive leap forward in developing digital graphic design and everything that computer-aided design makes possible.

Without this mathematical function, we wouldn't have computer software for graphic designers, draftsmen, and animators to work faster and more effectively without all the manual effort that used to be involved.

More importantly, this technology has made graphic design more accessible, opening the door for more people and ideas that could change the world. But still, not all design software is created equal, even if these platforms leverage everything Bézier curves have to offer.

It’s still up to you to select the computer software that capitalizes on past achievements to create something of even more worth. And that’s precisely what you get with Linearity Curve (formerly Vectornator).

Our graphic design software is your own personal suite of possibilities, as it provides every tool you need to create stunning digital images without constraint or concerns. With our platform, you're tapping into the entire scope of what Bézier curves have made possible: drawing, lettering, typography, graphic design, vector graphics, and more:

• Illustration: Using precise vector tools, you can create detailed, advanced digital art reflecting your skill and talent. Use Linearity Curve’s Pen Tool to create complex and precise paths.
• Lettering: Calligraphy, hand-lettering, and digital typography are all possible with our intuitive vector design software, enabling you to craft beautiful letters and type-based designs that speak to your audience.
• User interface design: Import your work from other platforms and take your designs to the next level with our Auto Trace feature for captivating, detailed vector designs.
• Print design: With fluid vector illustrations and powerful lettering, you can create impactful designs with accurate CMYK coloring that are ready for print.

Why not try Linearity Curve for free today and explore all the features that will show you what it's like to design without limits?