Bezier Curves and How to Use Them
Splines are one of the more confusing concepts every new designer has to deal with. Perhaps you have wondered what a spline is, or how moving the handles around changes its shape. This series of posts will serve as an in-depth dive into some of the common elements we see in web design. Although you may have used some of these tools already, I would like to take a more technical look at these elements, and what exactly it is they model and how they function internally.
When creating graphics, there are a couple different techniques available for creating object geometry. Sometimes these are as simple as using line and polygon generators or making a quick sketch with the pen and brush tools. However, when a more precise approach for creating curves is necessary, one of the best options is the spline tool. Splines use polynomial approximation to make it possible to create complex curved paths with a small number of control points. One of the most useful features splines offer are the “handles” at each one of these control points, which allow you to fine tune the angles and depth the final shape takes.
With the curve above, I only dictated that it needed to touch the four points I created, and the whole path was generated. For the most part as a designer that might be all the depth that you need, but let’s take a closer look anyway. In order to get a better understanding of just how that path is generated, let’s first examine one particular kind of spline: the bezier curve. According to MIT, a Bezier curve is “a parametric curve that uses the Bernstein polynomials as a basis.” In other words, Bezier curves are a precisely shaped polynomial that is categorized by its degree.
This definition can be better explained visually. Let’s say we specify three control points for our curve. Then, let’s send a point travelling at a constant speed from point 1 to point 2, and at the same time, a second point travelling at the same speed from point 2 to point 3. Connect these points with a line, and send a third point travelling across this line at the same speed as the other 2 points. The path that this connecting line point takes is the final curve:
As you can see, the final curve is determined by the path of the black point. In this case, due to its three control points, that curve is a quadratic polynomial, and is therefore categorized as a quadratic bezier curve. If it were to have four points, it would be considered a cubic bezier, five points would be a quartic, and so on.
So where do the handles that we are so used to come into play? Well, notice how in the animation above, P1 is actually never touched by the curve at all. However, it is connected to the endpoint P0 by a tangent line to the produced bezier curve. So although P1 is not touching the curve, it is one of the ends of a handle whose center is at P0.
That looks a little more familiar now, doesn’t it? The handles consist of the points used to construct the curve itself, which is why, when we drag them around, the shape of the curve changes dramatically. And since the midpoints of the handles are attached to the endpoints of the bezier curve, this means the handles will always be tangent to the curve, no matter how much you drag it around. More complex splines, like the one below, are just multiple bezier curves attached to one another, with shared handle endpoints.
The fact that one handle defines control points for both curves means that the two curves are always going to meet each other smoothly, and there will never be any sharp corners that result from manipulating the handle.
It is this exact property that makes splines such a useful tool in design. Hand-drawing curves tends to be imprecise and difficult to recreate, which makes bezier curves a much more accessible and reliable tool to use. Additionally, hand-drawn curves are difficult to modify, since any changes would require redrawing large portions of the curve. An alternative to splines would be using circular curves, but not every situation calls for a perfectly circular arc. Splines are truly the most versatile and forgiving option for curve generation in design.
Outside of the domain of visual design, bezier curves are used in video and audio editing, CAD, and CSS animation (specifically with regard to ease curves). When creating an animation in CSS, you can adjust the speed at which the animation progresses by specifying the timing function (ease, linear, ease-in, ease-out, ease-in-out, or cubic-bezier()). With ease, the animation starts off relatively slow, then progresses linearly, and then slows down near the end. The same motion analysis can be applied to the other timing curves shown below:
As you can see by the timing function shapes, they follow the motion of a bezier curve, and depending on where the handles are positioned, you can get quite a large range of timings for your animation. The cubic-bezier() function allows you to fully customize the shape of this bezier curve, rather than going with the static ease and linear presets. Cubic-bezier() takes four parameters, with the first two being the x- and y-coordinates of the bottom handle point, and the next two being the x- and y-coordinates of the top handle point. For example, if I wanted to create a more dramatic ease-in-out curve, I could use cubic-bezier(10, 0, 0, 10), which would extend the bottom handle very far to the right, and the top handle very far to the left.
As I hope I made evident, bezier curves are quite useful when it comes to design and animation. Next time you find yourself selecting the spline tool, just remember that their very foundation was created to make your design experience progress as smooth as possible (pun intended).