An interactive tool for the smooth curves that just a handful of control points can "shape". Move the control points P1 and P2 and watch the curve, the point B(t), the tangent and the curvature update in real time, and build an intuition for the computational geometry behind fonts, CAD and animation.
Parameters
Curve degree
Cubic has 4 control points, quadratic has 3
Control point P1, x coordinate
Control point P1, y coordinate
Control point P2, x coordinate
Not used for quadratic curves
Control point P2, y coordinate
Not used for quadratic curves
Parameter t
Position where the curve is evaluated (0 = start, 1 = end)
Results
—
B(t) x coordinate
—
B(t) y coordinate
—
Arc length (approx.)
—
Tangent direction at t (°)
—
Curvature κ at t
—
Control-polygon length
—
Bézier curve and De Casteljau construction — animation
The control points (dots) and control polygon (faint lines) are drawn with the Bézier curve (bold line). Parameter t sweeps 0→1, with the De Casteljau interpolation lines and the point B(t) moving along the curve.
The expanded cubic Bézier curve (4 control points). The curve interpolates the end points P0 and P3 exactly and is pulled toward the interior control points P1 and P2.
The curvature κ of a parametric curve. B' and B'' are the first and second derivatives; the tangent direction angle is atan2(B'y, B'x).
What is the Bézier Curve Simulator?
🙋
A "Bézier curve" is that thing in Illustrator's pen tool where you join points and bend them into a smooth shape, right? What is that curve, mathematically?
🎓
Exactly — that pen tool is the Bézier curve. Roughly speaking, it is "a smooth curve whose shape is decided by a few control points". Look at the canvas on the left. The two end points P0 and P3 are fixed, and what you can move are the in-between points P1 and P2. The curve always starts at P0 and ends at P3. But here is the interesting part: the inner points P1 and P2 are not points the curve "passes through" — they are points that "pull" the curve.
🙋
Wait, it doesn't pass through them? When I move P1 the curve moves with it, so I assumed it went through…
🎓
That is the heart of Bézier curves. The formula is B(t)=(1−t)³P0+3(1−t)²t·P1+3(1−t)t²P2+t³P3, and each control point carries a "weight". At t=0 the term (1−t)³ is 1 and the rest are 0, so B(0)=P0. At t=1, B(1)=P3. But for t in between, all four weights mix, so the curve never lands exactly on P1 or P2. It is more like gravity. So when you raise P1, the curve bulges upward. It moves just as you'd expect, doesn't it?
🙋
I see! Then what does the "parameter t" slider represent? There's a point moving along the curve.
🎓
t is a number from 0 to 1 that says "how far along the curve you are". t=0 is the start, t=1 is the end, and t=0.5 is roughly the middle. But t=0.5 is not necessarily the "midpoint of the curve's length" — the speed of travel changes with how the control points are placed. The thin construction lines on the canvas are from "De Casteljau's algorithm": repeating linear interpolation just three times gives you B(t). That is the standard, numerically stable way to evaluate a Bézier curve.
🙋
It's strange that repeated linear interpolation alone produces a curved line… Also, the results show a "curvature" — what is that good for?
🎓
Curvature κ measures "how sharply the curve bends at that point". Larger κ means a tighter turn, κ=0 means straight. Where this matters in practice is, for example, car body surfaces or font outlines. If the curvature changes abruptly, light reflections look jerky and the result looks "cheap". Designers tune the control points so the curvature joins up smoothly. Look at the "Curvature vs t" chart below — every time you move a control point, you see the curve smoothly form a hump.
🙋
There's also a "cubic" / "quadratic" switch. What is the difference?
🎓
A quadratic Bézier has 3 control points (P0, P1, P3) — only one interior control point. A cubic has 4, with two interior points. More control points means more freedom of shape: a cubic can change its bend direction halfway, like an S-curve, while a quadratic basically bulges in only one direction. In practice, TrueType fonts use the light, fast quadratic Bézier, while PostScript and OpenType CFF outlines use the more expressive cubic Bézier.
Frequently Asked Questions
No. The only control points a Bézier curve is guaranteed to pass through are the first and last (the end points). For a cubic Bézier, B(0)=P0 and B(1)=P3. The interior control points P1 and P2 only "pull" the curve toward them; the curve does not generally pass through them. The curve always stays inside the convex hull of all control points. At t=0 the end-point weight (1−t)³ equals 1 and the others are 0, and at t=1 the weight t³ equals 1, so only the end points are interpolated exactly.
De Casteljau's algorithm finds the point B(t) on a Bézier curve using nothing but repeated linear interpolation. You interpolate each adjacent pair of control points by the ratio t to get a new, shorter list of points, and repeat until one point remains — that point is B(t). A cubic Bézier collapses 4 → 3 → 2 → 1 points in three stages. It is numerically more stable than evaluating the Bernstein polynomial directly and also subdivides the curve at t for free, which is why it is the standard method in graphics and CAD. This tool's canvas draws exactly these construction lines.
The tangent comes from the first derivative B'(t). For a cubic, B'(t)=3(1−t)²(P1−P0)+6(1−t)t(P2−P1)+3t²(P3−P2), and the direction angle is atan2(B'y, B'x). The curvature κ uses the first and second derivatives: κ=|B'x·B''y − B'y·B''x| / (B'x²+B'y²)^1.5. When the denominator term (B'x²+B'y²) approaches zero the curvature diverges, so this tool guards the denominator with a tiny value to prevent NaN. The arc length is approximated by sampling t at about 200 points and summing the lengths of the small chords.
Bézier curves are the universal language of vector graphics. TrueType fonts use quadratic Béziers, while PostScript and OpenType CFF outlines use cubic Béziers to define the outline of every glyph. The pen tool in Illustrator and Inkscape, the SVG path element, animation motion paths, and the free-form curves and surfaces of CAD (Bézier surfaces, the basis of NURBS) are all built on Bézier curves. They are this widely used because moving a control point changes the curve intuitively and predictably, the curve stays within the convex hull, and it is numerically stable to evaluate.
Real-World Applications
Fonts and typography: The outline of every character displayed on a screen or printed on paper is defined by Bézier curves. TrueType fonts (.ttf) use the computationally light quadratic Bézier, while PostScript Type 1 and OpenType CFF outlines use the more expressive cubic Bézier. Font designers tune the control points of dozens of Bézier segments per glyph so the curves stay smooth at any scale. Combined with hinting, this keeps characters from collapsing even at tiny pixel counts.
Vector illustration and design tools: The pen tool in Illustrator, Inkscape and Figma, and the SVG path element, are all Bézier curves. Unlike raster images, a shape drawn with Béziers does not degrade no matter how far you zoom in. Logos, icons, maps — any graphic that must stay crisp at every resolution — is internally stored as the control-point coordinates of Bézier curves.
CAD and surface modeling: The free-form surfaces of car bodies, aircraft skins and consumer-electronics housings are modeled with Bézier surfaces — Bézier curves extended in two directions — and with their generalization, NURBS (non-uniform rational B-splines). The curvature concept this tool handles is the basis for evaluating how beautifully a surface reflects light (Class-A surfaces). Discontinuous curvature makes reflection highlights jerky and spoils the perceived quality of a product.
Animation and motion design: The travel paths (motion paths) of characters and cameras, and the easing curves of change over time, are also expressed with Bézier curves. The CSS cubic-bezier() function and the graph editors in After Effects and Blender are exactly mechanisms for editing the control points of a cubic Bézier to craft the feel of motion, such as "starts slow then speeds up".
Common Misconceptions and Pitfalls
The most common misconception is confusing control points with points on the curve. As noted above, a Bézier curve passes exactly only through the two end control points; the interior control points P1 and P2 merely pull the curve. Furthermore, the "parameter t" and the "distance along the curve (arc length)" are different things. t=0.5 is the midpoint in terms of weight distribution, not generally the midpoint of the curve's length. If you push the control points to one side, equally spaced t values give unequally spaced points on the curve. When you need evenly spaced points (for example, constant-speed animation along a path), you need "arc-length parameterization", which re-parameterizes by arc length.
Next, thinking "raising the degree lets you bend the curve freely". More control points do add expressiveness, but a high-degree Bézier curve (degree 5 or above) moves the whole curve when you move a single control point, making local editing hard. High-degree polynomials are also numerically prone to oscillation and instability. So in practice, instead of one high-degree Bézier, engineers use a "Bézier spline" — several cubic Béziers joined together. An Illustrator path is internally a chain of cubic Bézier segments. Matching the tangent direction (C1 continuity) or curvature (C2 continuity) at the joins is the key to a smooth appearance.
Finally, assuming "curvature is finite everywhere". The curvature formula κ=|B'x·B''y − B'y·B''x| / (B'x²+B'y²)^1.5 diverges when the denominator (B'x²+B'y²) — the square of the speed — reaches zero. This happens at a "cusp", where the control-point layout makes the tangent a zero vector; for example, pushing P1 and P2 of a cubic Bézier extremely toward the end points makes the curve fold back into a sharp point. In numerical computation, NaN or Infinity will appear unless you guard this denominator with a tiny value. This tool guards the denominator so the values never break down at any position, including t=0 and t=1. When designing a curve, it is also safe to check the curvature chart for unintended cusps.
How to Use
Set control point P1 coordinates using p1xNum and p1yNum sliders (range ±100 units)
Set control point P2 coordinates using p2xNum and p2yNum sliders (range ±100 units)
Adjust the parameter t slider (0 to 1) to traverse the cubic Bézier curve and observe real-time outputs: B(t) position, arc length, tangent angle in degrees, curvature κ, and control-polygon perimeter
Worked Example
For automotive body panel design, position P1 at (20, 40) and P2 at (75, 55). At t=0.5 (curve midpoint), the simulator returns B(t)≈(47.5, 47.5), arc length≈87 mm, tangent direction≈28°, curvature κ≈0.012 mm⁻¹, and control-polygon length≈110 mm. This 0.5 mm radius of curvature smoothness suits Class-A surface requirements for aesthetic panel transitions.
Practical Notes
Collinear P1–P2 endpoints produce straight lines; offset them perpendicular to the start–end axis for pronounced curvature (κ>0.02) suitable for aerodynamic fairings
Arc length exceeding control-polygon length signals tighter oscillations; use for precision cam profiles (manufacturing tolerance ±0.1 mm)
Tangent direction discontinuities across multiple curves require matching derivatives at junctions for CAD continuity class G1 or higher