Understanding the Cubic Bezier (C) SVG Path Command
Master the SVG cubic bezier curve command (C). Learn how the two control points shape the curve with visual examples and parameter explanations.
Detailed Explanation
The Cubic Bezier Command (C)
The C command draws a curve from the current point to a new endpoint, shaped by two control points. It is the most versatile curve command in SVG.
Syntax
C x1,y1 x2,y2 x,y
- (x1, y1) — First control point (influences the start of the curve)
- (x2, y2) — Second control point (influences the end of the curve)
- (x, y) — Endpoint where the curve finishes
Example Path
M 10,80 C 40,10 65,10 95,80
This starts at (10, 80), curves upward toward the control points at (40, 10) and (65, 10), and ends at (95, 80). The result is a smooth arch.
How Control Points Work
The curve leaves the start point heading toward the first control point and arrives at the endpoint coming from the direction of the second control point. The control points act like magnets pulling the curve, but the curve never actually passes through them (unless they lie on the line between start and end).
Multiple Cubic Segments
You can chain multiple C commands for complex curves:
M 10,50 C 30,10 50,10 70,50 C 90,90 110,90 130,50
This creates an S-curve with two cubic segments. For smooth transitions between segments, the second control point of one segment and the first control point of the next should be symmetric about the shared endpoint — or use the S (smooth cubic) command.
Relative vs. Absolute
Lowercase c uses coordinates relative to the current point. Uppercase C uses absolute coordinates. Relative is useful when building reusable, translatable path snippets.
Use Case
Cubic bezier curves are used everywhere in SVG illustration: drawing organic shapes, icon outlines, data visualization curves, handwriting paths, and map routes. They are also the foundation of font glyph outlines in formats like SVG fonts.