Cubic Bézier Curve Calculator (Point and Tangent at t)
The point on a cubic Bézier curve at any t between 0 and 1, with the speed and direction of the tangent there, from the four control points.
Results
Point on the curve, x
50.0000
Point on the curve, y
75.0000
Speed along the curve (|dP/dt|)
112.5000
Direction of the tangent
0.00
°
The dashed line marks the value you entered.
What this tool does
A cubic Bézier curve starts at P0 heading towards P1, ends at P3 arriving from P2, and never needs to touch the two middle points — they only pull the curve towards them. The same four-point curve draws SVG paths, font outlines and the CSS cubic-bezier() easing, where P0 = (0, 0) and P3 = (1, 1). Equal steps in t are not equal steps along the curve: the speed column shows where the curve is traversed fast and where it lingers.
Formula
B(t) = (1−t)³ P0 + 3(1−t)² t P1 + 3(1−t) t² P2 + t³ P3 · B′(t) = 3(1−t)² (P1−P0) + 6(1−t) t (P2−P1) + 3 t² (P3−P2)
Variables
| Symbol | Meaning | Unit |
|---|---|---|
x0 | Start point P0, x | — |
y0 | Start point P0, y | — |
x1 | Control point P1, x | — |
y1 | Control point P1, y | — |
x2 | Control point P2, x | — |
y2 | Control point P2, y | — |
x3 | End point P3, x | — |
y3 | End point P3, y | — |
t | Parameter t (0 = start, 1 = end) | — |
X | Point on the curve, x | — |
Y | Point on the curve, y | — |
V | Speed along the curve (|dP/dt|) | — |
A | Direction of the tangent | ° |
Worked example
- Start point P0, x0
- Start point P0, y0
- Control point P1, x25
- Control point P1, y100
- Control point P2, x75
- Control point P2, y100
- End point P3, x100
- End point P3, y0
- Parameter t (0 = start, 1 = end)0.5
- Point on the curve, x50.0000
- Point on the curve, y75.0000
- Speed along the curve (|dP/dt|)112.5000
- Direction of the tangent0.00 °
Limitations
- Mixing units is the most common source of error. Convert every input to the units shown next to each field before calculating.
- The calculation runs at full precision and only the display is rounded. If you copy an intermediate value and retype it, small differences can appear.