Last updated on

Cubic Bezier Curve Formula

ENNLESPT-BR


The cubic Bezier curve formula is

B(t)=(1−t)3P0+3(1−t)2tP1+3(1−t)t2P2+t3P3B(t) = (1 - t)^3 P_0 + 3(1 - t)^2t P_1 + 3(1 - t)t^2 P_2 + t^3 P_3

where P0P_0 is the start point, P3P_3 is the end point, P1P_1 is the start handle, P2P_2 is the end handle, and tt moves from 00 to 11 along the curve. The formula works by blending four points with weights that change smoothly as tt increases. For the broader geometric intuition behind these handles, the full interactive Bezier curves tutorial compares quadratic and cubic curves with editable control points.

How the Cubic Bezier Curve Formula Weights Four Points

The point B(t)B(t) is the curve position for one value of tt. The same formula applies to 2D coordinates, 3D coordinates, or any point type where coordinates can be multiplied by numbers and added together. For a 2D curve, compute the xx coordinate with the four weights, then compute the yy coordinate with the same four weights.

The four cubic basis weights are:

Weight Multiplies Meaning
(1−t)3(1 - t)^3 P0P_0 Dominates at the start of the curve
3(1−t)2t3(1 - t)^2t P1P_1 Pulls strongest near the first part of the curve
3(1−t)t23(1 - t)t^2 P2P_2 Pulls strongest near the last part of the curve
t3t^3 P3P_3 Dominates at the end of the curve

Those weights always add to 11. At t=0t = 0, the weights are 1,0,0,01, 0, 0, 0, so the curve is exactly at P0P_0. At t=1t = 1, the weights are 0,0,0,10, 0, 0, 1, so the curve is exactly at P3P_3. Halfway along the parameter, at t=0.5t = 0.5, the weights are 0.125,0.375,0.375,0.1250.125, 0.375, 0.375, 0.125. That middle sample shows why the interior handles matter: P1P_1 and P2P_2 together have most of the influence through the center of the segment, even though the curve usually does not pass through either handle.

The cubic panel shows the practical difference between the two interior handles. Dragging P1P_1 changes how the curve leaves P0P_0 because the start tangent points in the direction from P0P_0 toward P1P_1. Dragging P2P_2 changes how the curve arrives at P3P_3 because the end tangent points in the direction from P2P_2 toward P3P_3. The sample slider makes the changing basis weights visible: P1P_1 has more influence earlier, P2P_2 has more influence later, and the endpoints take over at the extremes.

What P0, P1, P2, P3, and t Mean

P0P_0 is the start endpoint. The curve touches this point when t=0t = 0. In SVG paths, fonts, vector editors, and animation tools, this is the first anchor of the cubic segment.

P3P_3 is the end endpoint. The curve touches this point when t=1t = 1. Together, P0P_0 and P3P_3 define the visible segment’s endpoints.

P1P_1 is the start handle. It controls the initial direction and strength of the curve as it leaves P0P_0. Moving P1P_1 farther away from P0P_0 makes that starting pull stronger. Rotating it around P0P_0 changes the start tangent direction.

P2P_2 is the end handle. It controls the approach into P3P_3. Moving P2P_2 changes the end tangent independently from the start tangent, which is the main practical advantage of a cubic curve over a quadratic curve. With two handles, a single segment can form S-curves, soft UI motion paths, font contours, animation paths, and vector drawing shapes that would otherwise need multiple simpler segments.

tt is the normalized curve parameter. It runs from 00 to 11, but it is not usually the same thing as distance along the curve. Equal steps in tt can produce unequal distances in screen space, so rendering and animation code may still need sampling, subdivision, or timing control depending on the use case. To move an object at a steady speed, the timing has to follow arc length, and the sibling page on the Bezier curve arc length formula shows how to compute and invert that length.

If you only need one interior handle, the sibling page on the quadratic Bezier curve formula shows the simpler three-point equation.