circle -> Perfect Circle

Basic Circle

<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

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

ellipse -> Oval Shape

Basic Ellipse

<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

<!-- 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