SVG Ellipse

The <ellipse> element is used to draw ellipses, which can be seen as an extended version of circles.

Basic Syntax

<svg width="200" height="100">
  <ellipse cx="100" cy="50" rx="80" ry="40" fill="#3b82f6"/>
</svg>

Main Properties

Property	Description
cx	Ellipse center x coordinate (default 0)
cy	Ellipse center y coordinate (default 0)
rx	x-axis radius (horizontal radius)
ry	y-axis radius (vertical radius)
fill	Fill color
stroke	Stroke color
stroke-width	Stroke width

Circle vs Ellipse

When rx equals ry, the ellipse becomes a circle.

Basic Ellipses

<svg width="400" height="200">
  <!-- Horizontal ellipse -->
  <ellipse cx="100" cy="60" rx="80" ry="40" fill="#3b82f6"/>

  <!-- Vertical ellipse -->
  <ellipse cx="280" cy="100" rx="40" ry="80" fill="#22c55e"/>
</svg>

Ellipses with Different Proportions

<svg width="500" height="150">
  <!-- Flat ellipse -->
  <ellipse cx="70" cy="75" rx="60" ry="25" fill="#3b82f6"/>

  <!-- Flatter ellipse -->
  <ellipse cx="200" cy="75" rx="60" ry="40" fill="#22c55e"/>

  <!-- Nearly circular -->
  <ellipse cx="330" cy="75" rx="55" ry="50" fill="#f59e0b"/>

  <!-- Tall narrow ellipse -->
  <ellipse cx="440" cy="75" rx="30" ry="60" fill="#8b5cf6"/>
</svg>

Ellipses with Stroke

<svg width="400" height="150">
  <!-- Stroke only -->
  <ellipse cx="80" cy="75" rx="60" ry="40"
           fill="none" stroke="#3b82f6" stroke-width="3"/>

  <!-- Fill + stroke -->
  <ellipse cx="220" cy="75" rx="60" ry="40"
           fill="#bfdbfe" stroke="#3b82f6" stroke-width="4"/>

  <!-- Dashed stroke -->
  <ellipse cx="360" cy="75" rx="60" ry="40"
           fill="none" stroke="#ef4444" stroke-width="3"
           stroke-dasharray="10,5"/>
</svg>

Transparent Ellipses

<svg width="300" height="200">
  <ellipse cx="100" cy="80" rx="80" ry="50" fill="#3b82f6" opacity="0.6"/>
  <ellipse cx="170" cy="100" rx="80" ry="50" fill="#ef4444" opacity="0.6"/>
  <ellipse cx="135" cy="140" rx="80" ry="50" fill="#22c55e" opacity="0.6"/>
</svg>

Concentric Ellipses

<svg width="250" height="180">
  <ellipse cx="125" cy="90" rx="110" ry="75" fill="#3b82f6"/>
  <ellipse cx="125" cy="90" rx="85" ry="55" fill="#60a5fa"/>
  <ellipse cx="125" cy="90" rx="60" ry="38" fill="#93c5fd"/>
  <ellipse cx="125" cy="90" rx="35" ry="22" fill="#bfdbfe"/>
  <ellipse cx="125" cy="90" rx="12" ry="8" fill="white"/>
</svg>

Using CSS Styling

<style>
  .ellipse-hover {
    fill: #3b82f6;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .ellipse-hover:hover {
    fill: #1d4ed8;
    rx: 90;
    ry: 50;
  }
</style>

<svg width="200" height="120">
  <ellipse class="ellipse-hover" cx="100" cy="60" rx="80" ry="40"/>
</svg>

Ellipse Animation

<svg width="400" height="150">
  <!-- Size animation -->
  <ellipse cx="80" cy="75" rx="50" ry="30" fill="#3b82f6">
    <animate attributeName="rx" values="50;70;50" dur="1s" repeatCount="indefinite"/>
    <animate attributeName="ry" values="30;45;30" dur="1s" repeatCount="indefinite"/>
  </ellipse>

  <!-- Rotation animation -->
  <ellipse cx="220" cy="75" rx="60" ry="30" fill="#22c55e">
    <animateTransform attributeName="transform" type="rotate"
                      values="0 220 75;360 220 75" dur="3s" repeatCount="indefinite"/>
  </ellipse>

  <!-- Transform animation (ellipse to circle) -->
  <ellipse cx="350" cy="75" rx="50" ry="30" fill="#8b5cf6">
    <animate attributeName="rx" values="50;40;50" dur="2s" repeatCount="indefinite"/>
    <animate attributeName="ry" values="30;40;30" dur="2s" repeatCount="indefinite"/>
  </ellipse>
</svg>

Practical Application Examples

Eyes

<svg width="200" height="100">
  <!-- Left eye -->
  <ellipse cx="50" cy="50" rx="35" ry="25" fill="white" stroke="#1f2937" stroke-width="2"/>
  <circle cx="50" cy="50" r="12" fill="#3b82f6"/>
  <circle cx="50" cy="50" r="5" fill="#1f2937"/>
  <circle cx="55" cy="45" r="3" fill="white"/>

  <!-- Right eye -->
  <ellipse cx="150" cy="50" rx="35" ry="25" fill="white" stroke="#1f2937" stroke-width="2"/>
  <circle cx="150" cy="50" r="12" fill="#3b82f6"/>
  <circle cx="150" cy="50" r="5" fill="#1f2937"/>
  <circle cx="155" cy="45" r="3" fill="white"/>
</svg>

Clouds

<svg width="200" height="100">
  <ellipse cx="60" cy="60" rx="40" ry="30" fill="#e5e7eb"/>
  <ellipse cx="100" cy="50" rx="50" ry="35" fill="#e5e7eb"/>
  <ellipse cx="150" cy="60" rx="35" ry="25" fill="#e5e7eb"/>
  <ellipse cx="120" cy="70" rx="40" ry="25" fill="#e5e7eb"/>
</svg>

Shadow Effect

<svg width="200" height="150">
  <!-- Shadow (ellipse) -->
  <ellipse cx="100" cy="130" rx="60" ry="15" fill="#00000033"/>
  <!-- Object (rectangle) -->
  <rect x="50" y="30" width="100" height="80" rx="10" fill="#3b82f6"/>
</svg>

Button Background

<svg width="180" height="60">
  <ellipse cx="90" cy="30" rx="85" ry="28" fill="#3b82f6"/>
  <text x="90" y="36" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
    Subscribe
  </text>
</svg>

3D Cylinder Top

<svg width="150" height="200">
  <!-- Cylinder body -->
  <rect x="25" y="50" width="100" height="120" fill="#3b82f6"/>
  <!-- Bottom ellipse -->
  <ellipse cx="75" cy="170" rx="50" ry="20" fill="#1d4ed8"/>
  <!-- Top ellipse -->
  <ellipse cx="75" cy="50" rx="50" ry="20" fill="#60a5fa"/>
</svg>

Next Steps

Now that you've learned ellipses, let's learn about SVG Line!