Bezier Curve
A mathematical curve defined by control points, used for creating smooth paths and animation timing.
What is Bezier Curve?
Bezier curves are parametric curves defined by control points that create smooth, predictable paths used extensively throughout motion graphics for shape design, motion paths, and animation timing. Named after French engineer Pierre Bezier, who developed them for automotive design in the 1960s, these mathematical curves have become foundational to digital graphics and animation.
In motion graphics, Bezier curves appear in two primary contexts. First, they define vector shapes and paths. The smooth curves of typography, logos, and illustrated elements are typically constructed from Bezier curves. Second, they control animation timing through easing functions, determining how animated values change over time.
The elegance of Bezier curves lies in their intuitive manipulation. Rather than defining curves through complex mathematical equations, designers manipulate control points that shape the curve predictably. Moving a control point adjusts the curve in visually logical ways, making sophisticated curve creation accessible to non-mathematicians.
Understanding Bezier curves empowers motion graphics artists to create custom shapes impossible with basic geometric tools and to craft animation timing that precisely matches creative intent. Proficiency with Bezier manipulation is a hallmark of advanced motion graphics skill.
How Does Bezier Curve Work?
A Bezier curve is defined by anchor points that the curve passes through and control handles that shape the curve between anchors. The simplest Bezier curve, a linear Bezier, connects two points with a straight line. Quadratic Bezier curves add one control point that pulls the line into a curve. Cubic Bezier curves, most common in graphics software, use two control points for sophisticated curve shaping.
The control handles represent tangent lines to the curve at the anchor points. The direction of the handle determines the direction the curve travels as it leaves the anchor. The length of the handle determines how far the curve follows that direction before bending toward the next control point.
Mathematically, a cubic Bezier curve interpolates between four points using the formula: B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃, where t ranges from 0 to 1. As t increases, the calculated point traces the curve from the first anchor to the last.
Software represents these curves as series of anchor points and handle coordinates. When you manipulate a handle visually, you are actually changing coordinate values that feed into this mathematical formula, which then generates the smooth curve you see on screen.
Key Benefits and Importance
- Creates perfectly smooth curves impossible with manual drawing
- Provides intuitive control through visual handle manipulation
- Enables mathematically precise curves that scale without quality loss
- Serves as industry standard ensuring cross-software compatibility
- Allows infinite variation in curve shape through handle adjustment
- Supports both path design and animation timing control
Common Use Cases
- •Vector logo and illustration design
- •Custom animation motion paths
- •Easing functions and timing curves
- •Typography and letterform design
- •Mask and shape creation
- •Camera movement paths in 3D space
Best Practices for Bezier Curve
Start with minimal anchor points and add more only if needed
Maintain tangent continuity for smooth curves unless sharp corners are intended
Use symmetrical handles for consistent curve character
Keep handles aligned with intended curve direction
Reference circle construction techniques for accurate curves
Practice pen tool skills regularly to build muscle memory
Industry Applications
Typography and font design rely fundamentally on Bezier curves. Every letterform in a digital font is constructed from Bezier curves that define its shape precisely. Motion graphics artists working with custom typography must understand Bezier construction to manipulate and animate letterforms effectively.
Logo design and brand identity work extensively uses Bezier curves. Clean, precise curves distinguish professional logo work from amateur attempts. Animation of logo elements often follows Bezier motion paths that complement the curves of the logo design itself.
User interface design employs Bezier curves for both element shapes and transition timing. The CSS cubic-bezier timing function directly implements Bezier mathematics for animation easing. UI animation standards like Material Design specify exact Bezier curve parameters for different interaction types.
Illustration and character design builds on Bezier fundamentals. Complex illustrations may contain thousands of Bezier curves defining every element. Character rigging often uses Bezier paths for motion control.
Technical Details
The cubic Bezier curve requires four control points: two end points (anchors) and two intermediate points (handles). The curve passes through the end points but is only influenced by, not passing through, the handle points. This indirect influence creates the characteristic smooth shaping.
Bezier curves have useful mathematical properties. They are contained within the convex hull of their control points, meaning the curve never extends beyond the polygon formed by connecting all control points. This property makes them predictable and prevents unexpected curve excursions.
Higher-order Bezier curves exist but are rarely used directly in graphics software. Instead, complex paths are constructed by chaining multiple cubic Bezier curves end to end. This approach, called a Bezier spline, provides local control while maintaining overall continuity.
The derivative of a Bezier curve (indicating velocity along the curve) is itself a Bezier curve of one lower degree. This recursive property simplifies many calculations related to curve behaviour and is used internally by software for operations like curve subdivision and intersection testing.
Pro Tips and Common Mistakes
- →Keep handle lengths proportional for smooth, consistent curves
- →Pull handles at 45-degree angles as a starting point for ease curves
- →Break tangent handles when you need sharp direction changes
- →Use fewer control points for smoother, more manageable curves
- ✗Adding too many control points creating overly complex curves
- ✗Creating asymmetric handles unintentionally causing bumpy curves
- ✗Ignoring tangent direction resulting in unwanted loops or kinks
- ✗Not understanding the difference between smooth and corner points