# SVG Notes: Circle & Ellipse

# circle -> Perfect Circle

## Basic Circle

```xml
<circle cx="50" cy="50" r="20" />
```

* `cx, cy` = center point coordinates
    
* `r` = radius (distance from center to edge)
    

## Circle Size Math

* **Radius** = 20 units from center to edge
    
* **Width** = 40 units (r × 2)
    
* **Height** = 40 units (r × 2)
    

## With Styling

```xml
<circle cx="50" cy="50" r="20" fill="blue" stroke="red" stroke-width="2" />
```

# ellipse -&gt; Oval Shape

## Basic Ellipse

```xml
<ellipse cx="50" cy="50" rx="30" ry="15" />
```

* `cx, cy` = center point coordinates
    
* `rx` = horizontal radius (left/right distance from center)
    
* `ry` = vertical radius (top/bottom distance from center)
    

## Ellipse Size Math

* **Horizontal radius** = 30 units from center to left/right edges
    
* **Vertical radius** = 15 units from center to top/bottom edges
    
* **Width** = 60 units (rx × 2)
    
* **Height** = 30 units (ry × 2)
    

## Common Ellipse Shapes

```xml
<!-- Wide oval -->
<ellipse cx="50" cy="50" rx="40" ry="20" />

<!-- Tall oval -->
<ellipse cx="50" cy="50" rx="15" ry="35" />

<!-- Nearly a circle -->
<ellipse cx="50" cy="50" rx="25" ry="24" />
```

# Key Differences from rect

* Use **center point** (`cx, cy`) instead of corner (`x, y`)
    
* Use **radius** (half-dimensions) instead of full width/height