Calculate a cubic Bezier curve and its SVG path data

How a cubic Bezier curve becomes an SVG path

A cubic Bezier segment uses four points. P0 is its start, P1 is the first control point, P2 is the second control point, and P3 is its endpoint. In SVG path data, a preceding M command establishes P0. The C command then lists P1, P2, and P3:

M P0x P0y
C P1x P1y, P2x P2y, P3x P3y

The visible curve normally passes through P0 and P3 but not P1 or P2. The line from P0 toward P1 determines the departure direction. The line from P2 toward P3 determines the arrival direction. Longer control handles generally extend their influence through more of the curve.

The cubic Bezier point formula

The parameter t runs from zero to one. At zero, the formula returns P0. At one, it returns P3. Between them, four polynomial weights blend the points:

B(t) = (1-t)^3 P0
     + 3(1-t)^2 t P1
     + 3(1-t)t^2 P2
     + t^3 P3

At t = 0.5, the weights are one eighth for P0, three eighths for P1, three eighths for P2, and one eighth for P3. The calculator applies this formula independently to x and y.

Parameter t is not the same as percentage of distance traveled. A point at t = 0.5 is the polynomial midpoint, but the curve length before and after it may differ. Motion that needs constant speed requires an arc-length lookup or another reparameterization step.

Tangent direction and angle

The derivative of the cubic formula produces a vector tangent to the curve. Its x and y components describe the instantaneous direction at t. The calculator turns that vector into an angle with atan2(y, x), using screen-style SVG coordinates where positive y points downward.

This tangent is useful for orienting arrowheads, labels, sprites, or markers along a curve. Remember that a mathematical angle appears vertically flipped when compared with a coordinate system where positive y points upward. SVG transforms also use the current element coordinate system, so nested transforms can change the final screen direction.

Why the curve length is approximate

General cubic Bezier arc length has no simple elementary formula. This calculator samples 160 evenly spaced t values, connects adjacent points with short line segments, and adds their lengths. That is usually a close practical estimate for design and debugging. Extremely tight loops or high-precision manufacturing work may need adaptive subdivision or numerical integration.

In browser code, an actual rendered path can also report a user-agent measurement through getTotalLength(). Results are expressed in current SVG user units, not CSS pixels. Transforms and responsive scaling can therefore change the rendered pixel length even while the untransformed path length remains the same.

Making connected cubic curves smooth

For two cubic segments to meet without a visible corner, align the incoming and outgoing handles through their shared endpoint. The handles can have different lengths, but they should point in opposite directions along the same line for tangent continuity.

SVG's S command reflects the previous control point across the current endpoint and uses that reflection as the next segment's first control point. It is compact for smooth sequences. Use explicit C commands when each handle needs independent control or when readable source matters more than a shorter path string.