Bezier Curve Calculator | De Casteljau Algorithm & Curve Points
Compute quadratic and cubic Bezier curves using the De Casteljau algorithm. Enter control points, choose any parameter t ∈ [0, 1], and see every intermediate interpolation step. Generates a full table of (x, y) coordinates along the curve, computes the tangent vector, and shows the first and second derivative formulas.
What Is the Bezier Curve Calculator | De Casteljau Algorithm & Curve Points?
A Bézier curve of degree n is defined by n+1 control points P₀…Pₙ. The parametric formula blends all points using Bernstein basis polynomials. As t goes from 0 to 1, the curve traces from P₀ to Pₙ, pulled toward the intermediate control points without necessarily passing through them. The De Casteljau algorithm evaluates B(t) geometrically by repeatedly linearly interpolating between adjacent pairs until one point remains — numerically stable and revealing the full subdivision structure. The tangent (derivative) at any t is computed via De Casteljau applied to the derived control polygon n·(Pᵢ₊₁ − Pᵢ).
Formula
B(t) = Σᵢ C(n,i)·(1−t)^(n−i)·tⁱ·Pᵢ, t ∈ [0, 1] — evaluated via De Casteljau algorithm
How to Use
- 1
Set the x and y coordinates for each control point P₀, P₁, … (2–6 points)
- 2
Use "+ Add point" to increase degree (up to degree 5) or "− Remove" to lower it
- 3
Drag the t slider from 0 to 1 to choose where along the curve to evaluate
- 4
Click a preset to load a named curve shape (S-curve, arch, ease-in-out, loop)
- 5
Click "Compute Bezier Curve" to see the exact point at t and the tangent vector
- 6
Open the De Casteljau steps panel to see every level of the recursive interpolation
- 7
Open the Curve coordinates table to copy (x, y) values for t = 0 to 1 in steps of 0.05
Enter control point coordinates (x, y), adjust the t slider, then click Compute to see the point, tangent, and full De Casteljau breakdown.
Example Calculation
Cubic Bezier — CSS ease-in-out: P₀=(0,0), P₁=(0.42,0), P₂=(0.58,1), P₃=(1,1). At t=0.5: De Casteljau level 0 → 3 intermediate points → 2 points → 1 point = B(0.5) ≈ (0.5, 0.5). Tangent vector points in the direction of motion at that parameter.
Understanding Bezier Curve | De Casteljau Algorithm & Curve Points
Bezier Curve Types
| Type | Control points | Degree | Polynomial | Common use |
|---|---|---|---|---|
| Linear | 2 | 1 | B(t) = (1−t)P₀ + tP₁ | Straight line interpolation |
| Quadratic | 3 | 2 | B(t) = (1−t)²P₀ + 2t(1−t)P₁ + t²P₂ | SVG path arcs, font outlines |
| Cubic | 4 | 3 | B(t) = Σ C(3,i)(1−t)^(3−i)tⁱPᵢ | CSS animations, pen tools, CAD |
| Quartic | 5 | 4 | Σ C(4,i)(1−t)^(4−i)tⁱPᵢ | Advanced curve design |
| Quintic | 6 | 5 | Σ C(5,i)(1−t)^(5−i)tⁱPᵢ | High-precision motion paths |
CSS cubic-bezier() Easing Functions
CSS animations use a cubic Bezier with fixed endpoints P₀=(0,0) and P₃=(1,1). Only the two middle handles are tunable:
| CSS keyword | cubic-bezier() | Effect |
|---|---|---|
| linear | cubic-bezier(0,0,1,1) | Constant speed |
| ease | cubic-bezier(0.25,0.1,0.25,1) | Slow start, fast middle, slow end (default) |
| ease-in | cubic-bezier(0.42,0,1,1) | Slow start, fast finish |
| ease-out | cubic-bezier(0,0,0.58,1) | Fast start, slow finish |
| ease-in-out | cubic-bezier(0.42,0,0.58,1) | Slow start and end |
Key Properties of Bezier Curves
- ›Endpoint interpolation: the curve always passes through P₀ and Pₙ.
- ›Convex hull: the curve lies entirely within the convex hull of its control points.
- ›Affine invariance: applying any affine transformation (translate, scale, rotate) to the control points gives the same transformed curve.
- ›Variation diminishing: the curve crosses any line no more times than the control polygon does.
- ›Subdivision: a Bezier curve can be split at any t into two Bezier curves of the same degree — this is how De Casteljau is used in rendering.
Frequently Asked Questions
What is the De Casteljau algorithm?
It evaluates a Bezier curve at parameter t by repeatedly linearly interpolating between adjacent control points. Each round reduces the count by 1 until one point remains — that is B(t). It is numerically stable and avoids computing large Bernstein polynomials directly.
What is the tangent vector?
The tangent is the first derivative of the curve with respect to t. It points in the direction the curve travels at parameter t. Its magnitude is the speed (rate of change of arc length per unit t).
Do Bezier curves pass through all control points?
Only the first (P₀) and last (Pₙ) control points. Intermediate points act as attractors that pull the curve toward them without the curve necessarily touching them.
How is this used in font design?
TrueType fonts use quadratic Beziers; PostScript / OpenType fonts use cubic Beziers to define every glyph outline. The control points stored in a font file are the Bezier handles you see in type-design software.
What is the difference between a Bezier curve and a B-spline?
A Bezier curve uses all its control points globally — moving one point affects the whole curve. A B-spline uses local control: each point only influences a nearby segment, making them easier to edit for complex shapes.
You Might Also Like
Explore 360+ Free Calculators
From math and science to finance and everyday life — all free, no account needed.