🍉 The Obscurities of Bézier Curves Explained to My Computer Engineer Friends

when we want to create some "natural" animation

@keyframes move {
  0% { transform: translateY(0); }
  10% { transform: translateY(10px); }
  20% { transform: translateY(20px); }
  30% { transform: translateY(30px); }
  40% { transform: translateY(40px); }
  50% { transform: translateY(50px); }
  60% { transform: translateY(60px); }
  70% { transform: translateY(70px); }
  80% { transform: translateY(80px); }
  90% { transform: translateY(90px); }
  100% { transform: translateY(100px); }

what are our alternatives

how does

"cubic-bezier(.., .., .., ..)"



so how... does it really work

why a few numbers can represent curve

The Peugeot 204 was the first car who’s bodywork was completely build using UNISURF CAD. Image via Flickr dave_7

the initial problem


modeling curves

modeling curve is not easy!

illustrations: Farin, Curves and Surfaces for CAGD

we are in the business of approximating curves


mathematicians: all continuous functions in a closed interval has polynomial approximation

engineers: how ah?

(please don't read this) Weierstrass approximation theorem states that every continuous function defined on a closed interval [a, b] can be uniformly approximated as closely as desired by a polynomial function

de Casteljau's algorithm

the “triangular scheme”


implementation (React)



recursive nature of

de Casteljau's algorithm

Some properties of Bézier curves

and their implications

1. the whole curve will stay within the polygon that defines it

this means you will guaranteed to have a “bounding box” for any Bézier curve

2.1. you can break a Bézier curve into smaller pieces and each segment is still a Bézier curve!

2.2. furthermore, all the control points of the (left and right) segments are already computed!

1. + 2. implies you can find the intersections of any two Bézier curves

by continuously breaking them down until either no bounding boxes intersect or you reach pixel level and still have intersecting bounding boxes

(check code for curve computation with split curve)

3. you can “join” two Bézier curves to form poly-Bézier curves, with some smoothing conditions

the smoothing conditions are to match the derivatives at their joints


  • non-local

  • cannot precisely modal shapes like an eclipse

Bézier curves in browsers


Canvas curveTo

representing font glyphs

(beyond browsers)


  • a page description language
  • used by Adobe
  • defines objects with vectors and rasters them on the fly
  • vectors are specified with straight lines and spline curves


🍉 The Obscurities of Bézier Curves Explained to My Computer Engineer Friends

By Wei Gao

🍉 The Obscurities of Bézier Curves Explained to My Computer Engineer Friends

  • 838