Draw a Heart Shape with SVG Cubic Bezier Curves
Create a heart icon using cubic bezier (C) path commands. Learn how symmetric control points create the characteristic heart lobes and pointed bottom.
Icons
Detailed Explanation
Heart Shape with Cubic Bezier Curves
A heart is one of the most recognizable shapes and a great exercise for learning cubic bezier curves. It consists of two symmetric lobes at the top and a pointed bottom.
The Path
M 50,30 C 50,20 40,0 20,0 C 0,0 0,20 0,30
C 0,50 20,65 50,90 C 80,65 100,50 100,30
C 100,20 100,0 80,0 C 60,0 50,20 50,30 Z
Structure
The heart is built from six cubic bezier segments:
- Left lobe top: From center-top down and left to the leftmost point
- Left lobe bottom: From leftmost point down to center-left
- Left side to point: From center-left down to the bottom point
- Right side from point: From bottom point up to center-right
- Right lobe bottom: From center-right up to rightmost point
- Right lobe top: From rightmost point back to center-top
Control Point Symmetry
The heart is symmetric about the vertical center line (x = 50). The right-side control points mirror the left-side ones:
| Left CP | Right CP |
|---|---|
| (40, 0) | (60, 0) |
| (0, 0) | (100, 0) |
| (0, 20) | (100, 20) |
| (20, 65) | (80, 65) |
Customizing the Heart
- Wider lobes: Move the top control points further apart horizontally
- Deeper cleft: Lower the starting
Mpoint y-coordinate - Sharper point: Move the bottom point further down and tighten the curves
- Rounded bottom: Use a less extreme endpoint for the bottom
Use Case
Heart shapes are used in like/favorite buttons, health indicators in games, valentine-themed designs, and emotional feedback icons. A path-based heart can be animated with stroke drawing effects or morphed into other shapes.