Bézier Curves
source link: https://blog.richardekwonye.com/bezier-curves?ref=sidebar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
and the logic behind them
- Share to Twitter
- Share to LinkedIn
- Copy link
Bézier Curves
by Richard Ekwonye
August 2023Bé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.
Linear Easing
Linear is typically used to animate properties at a constant rate/speed.
Step Easing
Step is used to animate properties at equal time intervals.
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.
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,p1andp2.p0andp2are anchor points,p1is the only control point. - p0p1p2p3
Cubic Bézier
Cubic Bézier has 4 points -
p0,p1,p2andp3.p0andp3are anchor points,p1andp2are 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.
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 25 150 C 75 25, 165 55, 150 175 generates a curve that starts at (25, 150) and ends at (150, 175).
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.
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) * tFor 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
01t 0.50Drag slidert represents progress of the curve, where 0 is the start and 1 is the end.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.
Share 
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK