Bézier Curve Visualizer

Drag the control points of a linear, quadratic or cubic Bézier curve and watch it change. Move the t slider or press Play to see de Casteljau’s construction find each point on the curve, with the Bernstein formula, the current numbers substituted, B(t) and the matching SVG path.

This tool runs entirely in your browser.

Loading tool…

How to use the Bézier Curve Visualizer

1Choose Linear, Quadratic or Cubic to set how many control points the curve has.
2Drag the points on the canvas, Tab to one and use the arrow keys, or type exact coordinates on the right.
3Move the t slider (or press Play) to see the de Casteljau construction lines and the point B(t) travel along the curve.
4Read the Bernstein formula with your numbers filled in, and copy the SVG path — and, for valid cubics, a CSS cubic-bezier() timing function.

What is the Bézier Curve Visualizer?

A Bézier curve of degree n is defined by n + 1 control points. It always starts at the first point and ends at the last; the points in between pull the curve towards themselves without usually touching it. At each end, the curve leaves in the direction of the neighbouring control point, which is why aligned handles give smooth joins in vector drawings and fonts.

There are two equivalent ways to compute a point. The Bernstein form is a weighted average: for a cubic, B(t) = (1−t)³P₀ + 3(1−t)²tP₁ + 3(1−t)t²P₂ + t³P₃, and the weights always sum to 1. de Casteljau’s algorithm gets the same point geometrically by repeatedly splitting the control polygon’s edges at the ratio t — the final segment is also the tangent of the curve at that point.

Frequently asked questions

What does t mean on a Bézier curve?

t is the curve parameter from 0 to 1. At t = 0 you are at the first point, at t = 1 at the last. Equal steps in t are not equal distances along the curve — points bunch up where the curve bends sharply.

Is CSS cubic-bezier() the same thing?

Yes, it is a cubic Bézier whose end points are fixed at (0, 0) and (1, 1), used as a timing curve. The tool shows the equivalent cubic-bezier() when your cubic can be mapped that way (control points must sit between the ends horizontally).

Why are the control points not on the curve?

Only the end points are guaranteed to lie on a Bézier curve. Inner control points act like magnets: they shape the curve, but it only passes through them in special cases, such as when all points are on one straight line.

Is the Bézier Curve Visualizer free and private?

Yes. The Bézier Curve Visualizer is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.

All reference & learning →