Chapter 6: SVG circle
SVG Circle means using the <circle> tag inside SVG code to draw a perfect circle (or filled dot, ring, button shape, etc.). It’s one of the easiest basic shapes in SVG — after rectangle, this is usually the second thing everyone learns because circles are everywhere: icons (like user profile pic), buttons, progress rings, loaders, charts (scatter plots), eyes in emojis, etc.
1. Why <circle> is Special in SVG
- It’s perfectly round — no need to calculate curves like with <path>
- Vector = zoom forever, still sharp (no pixel blur like PNG)
- Super simple: only 3 main attributes needed to start
- Can be styled, animated, filled, outlined — very flexible for web design
2. Basic Syntax of <circle>
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<circle cx="..." <!-- Center X (horizontal position) --> cy="..." <!-- Center Y (vertical position) --> r="..." <!-- Radius (half the diameter/size) --> fill="..." <!-- Inside color --> stroke="..." <!-- Border/outline color --> stroke-width="..." <!-- Border thickness --> /> |
- Self-closing tag (ends with />)
- Must live inside <svg>…</svg>
- cx, cy, r are in user units (like pixels if viewBox matches)
- r is required — no radius = no circle!
- cx and cy default to 0 if missing (circle starts at top-left)
3. Your First SVG Circle (Copy-Paste Right Now!)
Make a file circle.html:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Circle Basics</title> </head> <body> <h1>Red Circle – Hello SVG!</h1> <svg width="200" height="200" viewBox="0 0 200 200" style="border:1px solid gray;"> <!-- Simple red circle in center --> <circle cx="100" cy="100" r="80" fill="red" /> </svg> </body> </html> |
What you see: A big red circle perfectly centered.
Code explanation (like blackboard):
- cx=”100″ → center horizontally at 100 units (middle of 200 width)
- cy=”100″ → center vertically at 100 units
- r=”80″ → radius 80 → full diameter 160 units (fits nicely inside 200×200)
- fill=”red” → inside color (default black if missing)
- No stroke → no border
Zoom browser tab — still perfect!
4. All Important Attributes (Full List Like Notes)
| Attribute | Meaning | Required? | Default | Example | Notes |
|---|---|---|---|---|---|
| cx | X-coordinate of center | No | 0 | 50, 120, 50% | Horizontal from left |
| cy | Y-coordinate of center | No | 0 | 80, 150 | Vertical from top |
| r | Radius (distance from center to edge) | Yes | — | 40, 25, 50px | If ≤0 → invisible |
| fill | Color inside | No | black | blue, #ff0000, none | none = transparent |
| stroke | Outline/border color | No | none | black, #333 | No border if missing |
| stroke-width | Border thickness | No | 1 | 5, 10, 3px | In user units |
| opacity | Whole circle transparency | No | 1 | 0.6, 0.8 | 0 = invisible |
| stroke-dasharray | Dashed border pattern | No | — | “10 5” | Dash 10, gap 5 |
5. More Fun & Useful Examples (Try These!)
Example 1: Circle with Border (Ring Style)
XML
|
0 1 2 3 4 5 6 7 8 |
<svg width="150" height="150" viewBox="0 0 150 150"> <circle cx="75" cy="75" r="60" fill="none" stroke="purple" stroke-width="12"/> </svg> |
→ Hollow purple ring (great for progress indicators!)
Example 2: Smiley Face Using Multiple Circles
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg width="200" height="200" viewBox="0 0 200 200"> <!-- Face --> <circle cx="100" cy="100" r="80" fill="yellow" stroke="black" stroke-width="5"/> <!-- Left eye --> <circle cx="70" cy="80" r="15" fill="black"/> <!-- Right eye --> <circle cx="130" cy="80" r="15" fill="black"/> <!-- Smile (using path, but circle for eyes!) --> <path d="M60 130 Q100 170 140 130" fill="none" stroke="black" stroke-width="10" stroke-linecap="round"/> </svg> |
Example 3: Gradient Fill Circle (Modern Look)
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<svg viewBox="0 0 200 200" width="200" height="200"> <defs> <radialGradient id="grad"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <circle cx="100" cy="100" r="90" fill="url(#grad)" stroke="navy" stroke-width="6"/> </svg> |
→ Nice shiny blue ball!
Example 4: Hover Effect with CSS
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .my-circle:hover { fill: lime; r: 70; stroke: darkgreen; stroke-width: 10; } </style> <svg width="150" height="150"> <circle class="my-circle" cx="75" cy="75" r="60" fill="skyblue" stroke="navy" stroke-width="6"/> </svg> |
Hover → grows bigger and changes color!
6. Teacher’s Tips (Hyderabad Student Special 😄)
- Always use viewBox=”0 0 W H” → makes circle responsive (scales on mobile)
- For charts (D3.js, charts.js) — circles represent data points
- Progress rings? Use two circles: background gray + animated stroke-dasharray
- Common mistake: Forget r → nothing shows! Or wrong cx/cy → circle off-screen
- Tools: Figma/Inkscape export circle as SVG → copy code to HTML
Understood the circle fully? Want next: animated spinning circle? Progress ring example? Or circle with text inside (like percentage badge)? Or compare with <ellipse>? Just say — we keep building! 🚀
