Geometry • Multivariable & Vector Splines Flagship

Bézier Curve Calculator

Interactive calculator for generating quadratic and cubic Bézier splines, exporting SVG path coordinates, customizing CSS cubic-bezier() animation easings, and stepping through De Casteljau recursive linear interpolations.

Reviewed by Sanjay Samanta & Academic Review Board

Verified Bernstein Polynomial & De Casteljau Formulation

Last Updated: September 2026

Points: Order: Length:

💡 Click canvas to add points • Drag handles to adjust

t = P(t) = (, )

Curve Presets:

Control Point Manager

Control Handles Control Polygons De Casteljau Lines Tangent Vector

Curve Precision (Steps):

Stroke Thickness:

Point Coordinates (X, Y)

CSS Timing Function Editor

CSS Presets:

Handle 1 (P1):

Handle 2 (P2):

Live Transition Tester

CSS

Duration: s

Generated CSS Snippet

De Casteljau Step-by-Step Inspector

Interpolation Parameter (t):

Parametric Equations B(t)

X(t) =

Y(t) =

Point P(t)

Tangent Velocity

SVG Path Code (`d="..."`)

Understanding Bézier Curves

A Bézier curve is a smooth parametric curve defined by a set of control points $P_0, P_1, \dots, P_n$. First popularized in the 1960s by French engineer Pierre Bézier for designing car bodies at Renault (and independently developed by Paul de Casteljau at Citroën), Bézier curves are the foundational mathematical building block for modern vector graphics, digital typography, CAD/CAM systems, and CSS transition animations.

Linear Curve (1st Order)

Defined by 2 points ($P_0, P_1$). A straight line segment connecting start to end.

B(t) = (1-t)P₀ + tP₁

Quadratic Curve (2nd Order)

Defined by 3 points ($P_0, P_1, P_2$). Parabolic curve pulled toward handle $P_1$. Used in TrueType (.ttf) fonts.

B(t) = (1-t)²P₀ + 2(1-t)tP₁ + t²P₂

Cubic Curve (3rd Order)

Defined by 4 points ($P_0, P_1, P_2, P_3$). Allows smooth S-curves and inflections. Standard in CSS easing & PostScript (.otf).

B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃

Mathematical Formulations

Bernstein Polynomial Explicit Form

An $n$-th degree Bézier curve is explicitly defined as a linear combination of Bernstein basis polynomials B_i,n(t):

P(t) = ∑ᵢ₌₀ⁿ Bᵢ,ₙ(t) • Pᵢ , t ∈ [0, 1]
where Bᵢ,ₙ(t) = (n! / (i! • (n-i)!)) • (1 - t)ⁿ⁻ⁱ • tⁱ

The De Casteljau Recursive Algorithm

Instead of evaluating high-degree polynomials directly, the de Casteljau algorithm calculates points geometrically using repeated linear interpolation (lerp). At any step $k$, each intermediate point is calculated as:

Pᵢ⁽ᵏ⁾(t) = (1 - t) • Pᵢ⁽ᵏ⁻¹⁾(t) + t • Pᵢ₊₁⁽ᵏ⁻¹⁾(t)

CSS `cubic-bezier(x1, y1, x2, y2)` Explained

In Web CSS animations and transitions, timing functions map progression of time (X-axis, 0 to 1) to progression of the animated property (Y-axis).

Time Axis Constraint

The X-coordinates ($x_1, x_2$) represent time progress and must strictly remain between 0 and 1 as mandated by W3C CSS specifications (time cannot run backward!).

Property Axis & Overshoot (Springs)

The Y-coordinates ($y_1, y_2$) represent position and are unrestricted. Values $> 1.0$ create overshoot (spring arrival), while values $< 0.0$ create anticipation (pulling back before moving forward).

Real-World Industry Applications

🎨 Vector Graphics & SVG

Adobe Illustrator, Figma, and SVG paths (``) rely entirely on quadratic (`Q`) and cubic (`C`) Bézier commands to define scalable vector artwork without resolution loss.

🔤 Digital Typography

Fonts are stored as glyph outlines. TrueType (.ttf) uses 2nd-degree quadratic Béziers for fast hardware rendering, whereas OpenType (.otf) uses 3rd-degree cubic Béziers for smoother curves.

🎮 Game Motion & Robotics

Autonomous mobile robots, camera tracks in 3D game engines (Unity/Unreal), and drone flight navigation use Bézier splines for smooth jerk-free trajectory planning.

⚙️ Industrial CAD/CAM

Automotive body design, aerospace aerodynamics, and CNC machining paths utilize Non-Uniform Rational B-Splines (NURBS) — an advanced generalization of Bézier curves.

Direct Answer & Overview

Verified Educational Guide

Bézier Curve Definition & Key Formulas

A Bézier curve is a smooth parametric polynomial curve defined by n+1 control points. As parameter t varies from 0 to 1, the curve interpolates from start point P₀ to end point Pₙ, with its shape pulled toward intermediate control handles.

Primary Mathematical Formula Standard Mathematical Model

Standard Equation

ƒ(x)

Q.E.D.

Quadratic: B(t) = (1 − t)²P₀ + 2(1 − t)tP₁ + t²P₂, Cubic: B(t) = (1 − t)³P₀ + 3(1 − t)²tP₁ + 3(1 − t)t²P₂ + t³P₃, t ∈ [0, 1]

Evaluated with exact mathematical formulation • Rigorously verified

Exact Formula

Input Parameters

Required

Control Point Coordinates: P₀ (Start), P₁ (Handle 1), P₂ (Handle 2), P₃ (End)

Curve Order: Quadratic (Order 2) vs Cubic (Order 3)

Parametric Interpolation Value: t ∈ [0, 1]

Expected Outputs

Calculated

Parametric Coordinate B(t) = (x(t), y(t))

Tangent Velocity Vector B'(t)

SVG Path Code (M x0 y0 C x1 y1, x2 y2, x3 y3)

CSS cubic-bezier() Easing Specification

Interactive Drag-and-Drop Curve Visualizer

Worked Numerical Example

Instant Verification

Evaluate cubic Bézier curve at t = 0.5 with P₀=(0,0), P₁=(0,100), P₂=(100,100), P₃=(100,0)

→ B(0.5) = (0.5)³(0,0) + 3(0.5)³(0,100) + 3(0.5)³(100,100) + (0.5)³(100,0) = (50, 75).

Point at t = 0.5: (50, 75) | Tangent Velocity: (150, 0)

Parametric Definition & Bernstein Polynomial Basis

A Bézier curve of degree $n$ is mathematically formulated as a linear combination of $n+1$ control points $\mathbf{P}_i$ weighted by Bernstein polynomials $B_{i,n}(t)$:

$$\mathbf{B}(t) = \sum_{i=0}^n \binom{n}{i} (1 - t)^{n - i} t^i \mathbf{P}_i \quad (0 \le t \le 1)$$

Because $\sum_{i=0}^n B_{i,n}(t) = 1$ (partition of unity) and all weights are non-negative, the curve lies entirely inside the convex hull of its control polygon.

Quadratic (3-Point) vs Cubic (4-Point) Mathematical Formulas

Quadratic Bézier (Order 2)

$\mathbf{B}(t) = (1 - t)^2 \mathbf{P}_0 + 2(1 - t)t \mathbf{P}_1 + t^2 \mathbf{P}_2$

Uses 1 intermediate control handle. Common in TrueType font glyphs and fast 2D canvas curves (SVG Q command).

Cubic Bézier (Order 3)

$\mathbf{B}(t) = (1 - t)^3 \mathbf{P}_0 + 3(1 - t)^2 t \mathbf{P}_1 + 3(1 - t)t^2 \mathbf{P}_2 + t^3 \mathbf{P}_3$

Uses 2 intermediate handles for inflection points (S-curves). Standard in PostScript, OpenType fonts, SVG C, and CSS animation timing.

De Casteljau’s Recursive Geometric Algorithm

Paul de Casteljau discovered that any Bézier curve point $\mathbf{B}(t)$ can be evaluated through repeated linear interpolation without computing polynomial powers:

Level 1: $\mathbf{P}_0^1 = (1 - t)\mathbf{P}_0 + t\mathbf{P}_1, \quad \mathbf{P}_1^1 = (1 - t)\mathbf{P}_1 + t\mathbf{P}_2, \quad \mathbf{P}_2^1 = (1 - t)\mathbf{P}_2 + t\mathbf{P}_3$

Level 2: $\mathbf{P}_0^2 = (1 - t)\mathbf{P}_0^1 + t\mathbf{P}_1^1, \quad \mathbf{P}_1^2 = (1 - t)\mathbf{P}_1^1 + t\mathbf{P}_2^1$

Level 3: $\mathbf{B}(t) = \mathbf{P}_0^3 = (1 - t)\mathbf{P}_0^2 + t\mathbf{P}_1^2$

CSS cubic-bezier() Easing Functions & SVG Path Data (C / Q)

CSS Animation Easing

transition-timing-function: cubic-bezier(x1, y1, x2, y2) maps normalized animation progress $y(t)$ over elapsed time $x(t)$. Setting $y > 1$ creates spring/bounce physics.

Scalable Vector Graphics (SVG)

SVG <path d="M x0 y0 C x1 y1, x2 y2, x3 y3" /> encodes exact resolution-independent vector graphics rendered natively across all web browsers and mobile displays.

Applications in Typography (TrueType/OpenType), CAD & Robotics

Digital Font Rendering

Every glyph in modern typography (TrueType, OpenType, PostScript) is assembled from continuous chained Bézier splines ($G^1$ continuity).

Automotive & Aerospace CAD

Automobile body aerodynamics and aircraft wing profiles are sculpted using piecewise composite Bézier surfaces (NURBS patches).

Autonomous Robot Trajectories

Self-driving vehicles and robotic arms plan collision-free, jerk-minimized transit paths using parametric Bézier trajectory waypoints.

Step-by-Step Worked Numerical Solutions

Example 1 • Quadratic Bézier Evaluation Standard Tier

Find point on quadratic curve at $t = 0.5$ for $P_0(0, 0)$, $P_1(50, 100)$, $P_2(100, 0)$.

1. Formula: $B(t) = (1 - t)^2 P_0 + 2(1 - t)t P_1 + t^2 P_2$.

2. Weights at $t = 0.5$: $(1 - 0.5)^2 = 0.25$, $2(0.5)(0.5) = 0.50$, $(0.5)^2 = 0.25$.

3. $x(0.5) = 0.25(0) + 0.50(50) + 0.25(100) = 0 + 25 + 25 = 50$.

4. $y(0.5) = 0.25(0) + 0.50(100) + 0.25(0) = 0 + 50 + 0 = 50$.

Curve Coordinate at t = 0.5 is B(0.5) = (50, 50).

Common Pitfalls & Parameter Range Clamping

Pitfall 1: Expecting the Curve to Pass Directly Through Control Handles

A Bézier curve passes strictly through its endpoints $P_0$ and $P_n$. The intermediate points $P_1, P_2$ act as gravitational pull attractors, not through-points (except in trivial collinear configurations).

Pitfall 2: Confusing Parameter t with Arc Length Distance

The parameter $t$ does not represent uniform physical distance traveled along the curve. For constant-speed animation along a Bézier spline, arc-length reparameterization via numerical integration is required.

Fact-Checked & Verified • Computational Accuracy Standards

Updated July 2026 • Editorial Policy

Authored By

Sanjay Samanta

Lead Developer & Founder of Basic Math Tools. Specializes in browser-native computational algorithms and applied mathematics.

Reviewed & Verified By

Academic Review Board

Mathematics & curriculum specialists. Audited against standard algebraic and arithmetic principles.

Found an error or have an improvement suggestion? Report a calculation issue

Frequently Asked Questions

What is a Bézier curve in mathematics and computer graphics?

A Bézier curve is a parametric curve defined by a set of discrete control points P₀ through Pₙ using Bernstein polynomials. Invented by Pierre Bézier for automotive body design, it provides smooth, mathematically scalable curves essential for typography, CAD modeling, vector graphics, and CSS animation timing.

What is the formula for Quadratic vs Cubic Bézier curves?

A Quadratic Bézier curve (3 control points) is defined as B(t) = (1 − t)²P₀ + 2(1 − t)tP₁ + t²P₂ for t ∈ [0, 1]. A Cubic Bézier curve (4 control points) is defined as B(t) = (1 − t)³P₀ + 3(1 − t)²tP₁ + 3(1 − t)t²P₂ + t³P₃.

What is De Casteljau’s algorithm?

De Casteljau’s algorithm is a recursive geometric method for evaluating Bézier curves by performing repeated linear interpolations (lerps) along the polygon edges formed by the control points at parameter t. It guarantees numerical stability and enables curve subdivision.

How do CSS cubic-bezier() animation timing functions work?

In CSS animations, cubic-bezier(x₁, y₁, x₂, y₂) defines a normalized cubic curve where start point P₀ = (0, 0) and end point P₃ = (1, 1). The two user-defined control points P₁ and P₂ control the acceleration profile (e.g. ease-in, ease-out, or bouncy overshoot curves).

Why are Bézier curves always contained within the convex hull of their control points?

Because the Bernstein polynomial blending weights ∑ B_{i,n}(t) = 1 are strictly non-negative partition of unity functions for t ∈ [0, 1], every point on the curve is a convex combination of the control points, guaranteeing it never strays outside their bounding polygon.