SVG Paths: Curves and Arcs

The real power of the path element comes from its curve commands. These allow you to draw smooth, organic shapes that are impossible to create with straight-line elements alone.

Bezier Curves

SVG supports two types of Bezier curves. Both are defined using control points. These are invisible handles that pull the curve in a particular direction, like a magnet.

Cubic Bezier Curve: `C`

The C command uses two control points to give each end of the curve an independent handle:

C x1 y1, x2 y2, x y

x1 y1: Control point for the start of the curve.
x2 y2: Control point for the end of the curve.
x y: The end point of the curve.

The shorthand version S continues a curve from the last C, automatically reflecting the previous second control point.

Quadratic Bezier Curve: `Q`

The Q command uses one shared control point, making it simpler but less flexible:

Q x1 y1, x y

x1 y1: The single shared control point.
x y: The end point of the curve.

Example: Cubic and Quadratic Curves

Here both curve types are compared side by side. The small dots indicate the positions of the control points:

View Output

Elliptical Arcs: `A`

The arc command A draws a portion of an ellipse between two points. It's perfect for pie charts, rounded corners, and speech bubble tails. The syntax is:

A rx ry x-rotation large-arc-flag sweep-flag x y

rx, ry: The x and y radii of the ellipse to draw an arc from.
x-rotation: Rotation of the ellipse in degrees. Almost always 0.
large-arc-flag: 0 for the short arc, 1 for the long arc (the two arcs formed between the points).
sweep-flag: 0 to draw counter-clockwise, 1 to draw clockwise.
x y: The end point of the arc.

Example: A Half-Circle and a Pie Slice

View Output

The Half-Circle (Lavender Arc)

The lavender arc acts as the "top" element in this composition:

M 40 150: This sets the start point at 40 units in from the left (x=40) and 150 units down from the top (y=150).
A 80 80 0 0 1 260 150: This draws the arc with a radius of 80, landing at a finish point 260 units from the left (x=260) but staying on that same horizontal line (y=150).

The Pie Slice (Coral Wedge)

The coral slice is the "bottom" element:

M 150 175: This sets the center point (the "tip" of the slice) at 150 units from the left (x=150) and 175 units down from the top (y=175).
L 210 175: This draws a straight horizontal line to the right edge of the slice (x=210), keeping the height at 175.
A 60 60 0 0 1 150 235: This creates the curved "crust.".
Z: The "Close Path" command (as seen in the previous lesson). It automatically draws a straight line from the current position back to the initial M point (the center), completing the slice.