SVG C Command Cubic Bezier Control Points

In SVG path data, creating a cubic Bézier curve segment using the C command relies on four distinct points to determine its shape and path. While the initial starting point is established by the preceding path command, the C command itself explicitly requires two directional control points and one terminal endpoint. Together, these control points govern the curvature, direction, and destination of the curve segment.

The Required Points Explained

A cubic Bézier curve requires four total points: a start point, two control handles, and an end point.

C x1 y1, x2 y2, x y

Start Point (\(P_0\)): This point is not written inside the C command parameters. Instead, it is implicitly defined by the current point on the path, typically established by a preceding MoveTo (M), LineTo (L), or another curve command.
First Control Point (\(P_1\): x1, y1): This is the first explicit parameter set in the C command. It acts as an anchor handle connected to the start point, determining the initial tangent and the direction in which the curve leaves the start point.
Second Control Point (\(P_2\): x2, y2): This is the second parameter set in the C command. It acts as an anchor handle connected to the end point, determining the incoming tangent and the direction from which the curve arrives at the destination.
End Point (\(P_3\): x, y): This is the final coordinate pair in the C command. It defines the final destination where the curve terminates, which then becomes the starting point for any subsequent path command.

Absolute vs. Relative Commands

Uppercase C (Absolute): The coordinates x1 y1, x2 y2, and x y are evaluated as absolute positions relative to the SVG coordinate system origin (0, 0).
Lowercase c (Relative): The coordinates dx1 dy1, dx2 dy2, and dx dy are evaluated as relative offsets from the curve’s start point (\(P_0\)).

Syntax Example

<path d="M 10 80 C 40 10, 65 10, 95 80" stroke="black" fill="transparent"/>

In this example: * Start Point: (10, 80) (from the M command) * First Control Point: (40, 10) * Second Control Point: (65, 10) * End Point: (95, 80)