Bézier curve
The cubic curve behind fonts, SVG paths and CSS easing: two end points and two handles, blended by repeated linear interpolation.
Adjust parameters
Export
Formulas and key values
- Parametric equations
- Tangent at the ends
- Construction rule
De Casteljau: split each side of the control polygon at ratio t, split the new segments at t, then once more; the last point is B(t).
P₀ = (0, 0) and P₃ = (1, 0) are the end points; P₁ and P₂ are the handles you drag with the sliders; t runs from 0 to 1.
Explainer video
Make a video of the Bézier curve
Opens the Creator with a ready-made brief for this curve. Free-form generation is in beta.
Start the video01 · Definition
What is the Bézier curve?
Paul de Casteljau at Citroën (1959) and Pierre Bézier at Renault (in the 1960s) independently found a way to describe smooth car-body curves with a handful of control points. The cubic version uses four: it starts at P₀ heading towards P₁, ends at P₃ arriving from P₂, and never leaves the convex hull of the four points.
De Casteljau’s algorithm builds the point B(t) by nothing but repeated linear interpolation: split each side of the control polygon at ratio t, then split the new segments, then once more. The same arithmetic outlines the glyphs of TrueType and OpenType fonts (quadratic curves in TrueType, cubic in CFF), every curve in an SVG path, and every cubic-bezier() easing in CSS.
02 · Properties
Key properties
- Passes through P₀ and P₃; generally not through P₁ or P₂.
- End tangents: B′(0) = 3(P₁ − P₀), B′(1) = 3(P₃ − P₂).
- Lies inside the convex hull of its four control points.
- De Casteljau’s algorithm evaluates it by three rounds of linear interpolation.
- The weights (1 − t)³, 3(1 − t)²t, 3(1 − t)t², t³ are the Bernstein polynomials and sum to 1.
03 · Questions
Bézier curve: common questions
- What is the equation of the Bézier curve?
- Parametric equations: B(t) = (1-t)^3P₀ + 3(1-t)^2t P₁ + 3(1-t)t^2P₂ + t^3P₃. P₀ = (0, 0) and P₃ = (1, 0) are the end points; P₁ and P₂ are the handles you drag with the sliders; t runs from 0 to 1.
- How is the Bézier curve constructed?
- Construction rule: De Casteljau: split each side of the control polygon at ratio t, split the new segments at t, then once more; the last point is B(t).. P₀ = (0, 0) and P₃ = (1, 0) are the end points; P₁ and P₂ are the handles you drag with the sliders; t runs from 0 to 1.
04 · Keep exploring