What is a Bézier curve?

A curve set by a start point, an end point and control points that pull the curve toward them. A quadratic has one control point and a cubic has two, and B(t) traces the curve from the start at t = 0 to the end at t = 1. The whole curve lies inside the convex hull of its control points, which is why Fit frames the view around them.

How does de Casteljau's algorithm work?

Interpolate each neighbouring pair of control points at the fraction t, which leaves one point fewer, and repeat until one point is left: that point is B(t). For the cubic (0, 0), (0, 1), (1, 1), (1, 0) at t = 0.5, level 1 is (0, 0.5), (0.5, 1), (1, 0.5), level 2 is (0.25, 0.75), (0.75, 0.75), and the point is (0.5, 0.75). The last construction segment is tangent to the curve, and B'(t) is that segment times the degree: 3 × ((0.75, 0.75) - (0.25, 0.75)) = (1.5, 0).

How long is a Bézier curve?

A quadratic has a closed-form length but a cubic in general does not, so the page gives two numbers. The sampled length adds straight segments between equally spaced values of t, from 1 to 10000 segments, and is never longer than the curve. The arc length integrates the speed |B'(t)| by adaptive Simpson to an error target of one ten-billionth of the control polygon's length, and the pane shows how far short the sampled length falls. For the cubic above, 100 segments give 1.999921 against an arc length of 2, a shortfall of 7.9e-5.

How do I get the SVG path of my curve?

The path reads M x0 y0 Q x1 y1 x2 y2 for a quadratic or M x0 y0 C x1 y1 x2 y2 x3 y3 for a cubic, with every coordinate written exactly as set. Copy puts it on the clipboard, and .svg downloads a file holding that path in a viewBox equal to the current view, so panning and zooming change the frame but never the coordinates. Coordinates follow SVG, with y growing downward, so the file draws the curve the page shows.

Can I paste a path I already have?

Yes, one segment of up to 2000 characters: M followed by one Q or C, absolute or relative (lower-case q and c are measured from the start point), with spaces or commas, or a whole element. Other commands such as L, S, A and Z, and paths with more than one segment, are refused with a message naming the problem, and every coordinate must be between -100000 and 100000.

What happens when I switch between quadratic and cubic?

Switching to cubic raises the degree: the new control points are (P0 + 2 P1) / 3 and (2 P1 + P2) / 3, and the curve does not change. Switching to quadratic keeps the ends and sets the control point to (3 (P1 + P2) - (P0 + P3)) / 4 (held inside -100000 to 100000), which is the same curve only when the cubic came from a quadratic; otherwise the shape changes and the page says so.

Is this the same as CSS cubic-bezier()?

No. CSS cubic-bezier(x1, y1, x2, y2) is an animation timing function whose ends are fixed at (0, 0) and (1, 1). This lab draws general curves in SVG coordinates and exports SVG paths and CSV samples, not CSS timing functions.

Bézier Curve Lab

Place the end points and one or two control points of a quadratic or cubic Bézier curve by dragging them on the drawing, nudging them with the arrow keys or typing exact coordinates, then move t from 0 to 1 to watch de Casteljau's construction find the point on the curve. Beside the drawing the page prints every construction level, the point B(t), the tangent B'(t) and the second derivative, the tight bounding box from the roots of the derivative, and two lengths: the polyline through the number of sampling segments you choose, and the arc length integrated by adaptive Simpson with its error target. Coordinates follow SVG, with y growing downward, and panning or zooming the view never changes them, so the path you copy or download as an .svg file draws exactly the curve on screen. Samples of t, x, y and the tangent download as CSV, and a pasted path with one Q or C segment opens in the lab.

cubic4 points, y grows downward

dashed: control polygon, colored: construction, arrow: B'(t) / 3 view x -0.5 to 1.5, y -0.5 to 1.5, drag and arrow step 0.01 drag a point to move it, or drag empty space to pan

construction

arrows move

de Casteljaut = 0.5

points, exact values

P0start

P1control

P2control

P3end

left xtop yview sizesegments

construction at t = 0.5, figures to 6 decimal places, path exact

level 1: (0, 0.5) (0.5, 1) (1, 0.5)
level 2: (0.25, 0.75) (0.75, 0.75)
point: B(0.5) = (0.5, 0.75)
tangent: B'(0.5) = 3 × ((0.75, 0.75) - (0.25, 0.75)) = (1.5, 0)
speed: |B'(0.5)| = 1.5
B''(0.5): (0, -6)
length: 1.999921 over 100 straight segments
arc length: 2 by adaptive Simpson, error target 3.0e-10 the sampled length is 7.9e-5 shorter
box: x 0 to 1, y 0 to 0.75 dy/dt = 0 at t 0.5
path: M 0 0 C 0 1 1 1 1 0
csv: 101 rows of t, x, y, dx/dt, dy/dt

paste a path: M, then one Q or C

B(0.5)

(0.5, 0.75)

Tangent at 0.5

(1.5, 0)

Length, 100 segments

1.999921

Arc length

SVG path

M 0 0 C 0 1 1 1 1 0

Quadratic (0, 0), (1, 2), (2, 0)t = 0.5
(1, 1), the de Casteljau point
The same quadratic at t = 0 and t = 1endpoints and slope
(0, 0) and (2, 0); the tangent at t = 0 is 2 × ((1, 2) - (0, 0)) = (2, 4)
The cubic above, panned and zoomedexport SVG
viewBox -1 -1.5 4 4, and the path is still M 0 0 C 0 1 1 1 1 0: the view never changes the coordinates

Coordinates are SVG user units with y growing downward, so the exported path draws exactly this curve. Panning and zooming never change a coordinate: the path and the .svg file keep every digit of the points as set.

Common questions

What is a Bézier curve?: A curve set by a start point, an end point and control points that pull the curve toward them. A quadratic has one control point and a cubic has two, and B(t) traces the curve from the start at t = 0 to the end at t = 1. The whole curve lies inside the convex hull of its control points, which is why Fit frames the view around them.
How does de Casteljau's algorithm work?: Interpolate each neighbouring pair of control points at the fraction t, which leaves one point fewer, and repeat until one point is left: that point is B(t). For the cubic (0, 0), (0, 1), (1, 1), (1, 0) at t = 0.5, level 1 is (0, 0.5), (0.5, 1), (1, 0.5), level 2 is (0.25, 0.75), (0.75, 0.75), and the point is (0.5, 0.75). The last construction segment is tangent to the curve, and B'(t) is that segment times the degree: 3 × ((0.75, 0.75) - (0.25, 0.75)) = (1.5, 0).
How long is a Bézier curve?: A quadratic has a closed-form length but a cubic in general does not, so the page gives two numbers. The sampled length adds straight segments between equally spaced values of t, from 1 to 10000 segments, and is never longer than the curve. The arc length integrates the speed |B'(t)| by adaptive Simpson to an error target of one ten-billionth of the control polygon's length, and the pane shows how far short the sampled length falls. For the cubic above, 100 segments give 1.999921 against an arc length of 2, a shortfall of 7.9e-5.
How do I get the SVG path of my curve?: The path reads M x0 y0 Q x1 y1 x2 y2 for a quadratic or M x0 y0 C x1 y1 x2 y2 x3 y3 for a cubic, with every coordinate written exactly as set. Copy puts it on the clipboard, and .svg downloads a file holding that path in a viewBox equal to the current view, so panning and zooming change the frame but never the coordinates. Coordinates follow SVG, with y growing downward, so the file draws the curve the page shows.
Can I paste a path I already have?: Yes, one segment of up to 2000 characters: M followed by one Q or C, absolute or relative (lower-case q and c are measured from the start point), with spaces or commas, or a whole <path> element. Other commands such as L, S, A and Z, and paths with more than one segment, are refused with a message naming the problem, and every coordinate must be between -100000 and 100000.
What happens when I switch between quadratic and cubic?: Switching to cubic raises the degree: the new control points are (P0 + 2 P1) / 3 and (2 P1 + P2) / 3, and the curve does not change. Switching to quadratic keeps the ends and sets the control point to (3 (P1 + P2) - (P0 + P3)) / 4 (held inside -100000 to 100000), which is the same curve only when the cubic came from a quadratic; otherwise the shape changes and the page says so.
Is this the same as CSS cubic-bezier()?: No. CSS cubic-bezier(x1, y1, x2, y2) is an animation timing function whose ends are fixed at (0, 0) and (1, 1). This lab draws general curves in SVG coordinates and exports SVG paths and CSV samples, not CSS timing functions.

Points, tangents, the de Casteljau construction and the bounding box come from the curve's own polynomial in double-precision floating point. The sampled length adds straight segments between equally spaced values of t, so it is never longer than the curve, and the arc length is integrated by the adaptive Simpson rule to an error target of one ten-billionth of the control polygon's length. The exported path keeps the control-point coordinates exactly as set, whatever the view; this is for geometry and vector drawing, not physical motion paths or machine control.