Smooth Cubic Bezier (S) for Continuous Curves
Learn how the S command creates smooth curves by reflecting the previous control point. Build seamless multi-segment bezier curves with fewer parameters.
Detailed Explanation
The Smooth Cubic Command (S)
The S command is a shorthand for C that automatically calculates the first control point by reflecting the previous segment's second control point across the current point.
Syntax
S x2,y2 x,y
- (x2, y2) — The second control point
- (x, y) — The endpoint
The first control point is computed as the reflection of the previous C or S command's second control point.
Example: S-Curve
M 10,50 C 30,10 50,10 70,50 S 110,90 130,50
The first segment uses C with control points at (30, 10) and (50, 10). The second segment uses S, which reflects (50, 10) across (70, 50) to get (90, 90) as the implied first control point. The explicit second control point is (110, 90).
Why Smooth Matters
Without S, connecting cubic bezier segments smoothly requires careful manual placement of the first control point. With S, smoothness is guaranteed because the tangent direction is continuous at the junction.
Visual Comparison
# Manual (requires 6 params per segment):
M 10,50 C 30,10 50,10 70,50 C 90,90 110,90 130,50
# With S (only 4 params for the second segment):
M 10,50 C 30,10 50,10 70,50 S 110,90 130,50
Both produce identical output, but S is more concise and inherently smooth.
Chaining Multiple S Commands
Each subsequent S reflects from the previous segment, creating a long, smooth curve:
M 0,50 C 20,10 40,10 60,50 S 100,90 120,50 S 160,10 180,50
This produces a smooth wave pattern with three segments.
Use Case
Smooth cubic bezier is used extensively in icon design, data chart lines, sine wave approximations, and any multi-segment curve that needs to be visually continuous without sharp transitions.