SVG Circle

The <circle> element is used to draw circles, one of the simplest shapes in SVG.

Basic Syntax

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#3b82f6"/>
</svg>

Main Properties

Property	Description
cx	Center x coordinate (default 0)
cy	Center y coordinate (default 0)
r	Circle radius
fill	Fill color
stroke	Stroke color
stroke-width	Stroke width

Basic Circles

<svg width="400" height="150">
  <!-- Blue circle -->
  <circle cx="60" cy="75" r="50" fill="#3b82f6"/>

  <!-- Green circle -->
  <circle cx="180" cy="75" r="50" fill="#22c55e"/>

  <!-- Red circle -->
  <circle cx="300" cy="75" r="50" fill="#ef4444"/>
</svg>

Different Sized Circles

<svg width="400" height="200">
  <circle cx="40" cy="100" r="20" fill="#3b82f6"/>
  <circle cx="110" cy="100" r="35" fill="#22c55e"/>
  <circle cx="200" cy="100" r="50" fill="#f59e0b"/>
  <circle cx="310" cy="100" r="65" fill="#8b5cf6"/>
</svg>

Circles with Stroke

<svg width="400" height="150">
  <!-- Stroke only -->
  <circle cx="60" cy="75" r="45"
          fill="none" stroke="#3b82f6" stroke-width="3"/>

  <!-- Fill + stroke -->
  <circle cx="180" cy="75" r="45"
          fill="#bfdbfe" stroke="#3b82f6" stroke-width="4"/>

  <!-- Dashed stroke -->
  <circle cx="300" cy="75" r="45"
          fill="none" stroke="#ef4444" stroke-width="3"
          stroke-dasharray="10,5"/>
</svg>

Transparent Circles

<svg width="250" height="200">
  <!-- Overlapping semi-transparent circles -->
  <circle cx="80" cy="80" r="60" fill="#3b82f6" opacity="0.6"/>
  <circle cx="130" cy="80" r="60" fill="#ef4444" opacity="0.6"/>
  <circle cx="105" cy="130" r="60" fill="#22c55e" opacity="0.6"/>
</svg>

Concentric Circles

<svg width="200" height="200">
  <circle cx="100" cy="100" r="90" fill="#3b82f6"/>
  <circle cx="100" cy="100" r="70" fill="#60a5fa"/>
  <circle cx="100" cy="100" r="50" fill="#93c5fd"/>
  <circle cx="100" cy="100" r="30" fill="#bfdbfe"/>
  <circle cx="100" cy="100" r="10" fill="white"/>
</svg>

Using CSS Styling

<style>
  .circle-hover {
    fill: #3b82f6;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .circle-hover:hover {
    fill: #1d4ed8;
    transform-origin: center;
    transform: scale(1.1);
  }
</style>

<svg width="150" height="150">
  <circle class="circle-hover" cx="75" cy="75" r="50"/>
</svg>

Circle Animation

<svg width="400" height="150">
  <!-- Radius animation -->
  <circle cx="60" cy="75" r="30" fill="#3b82f6">
    <animate attributeName="r" values="30;50;30" dur="1s" repeatCount="indefinite"/>
  </circle>

  <!-- Color animation -->
  <circle cx="180" cy="75" r="40" fill="#22c55e">
    <animate attributeName="fill"
             values="#22c55e;#3b82f6;#ef4444;#22c55e"
             dur="2s" repeatCount="indefinite"/>
  </circle>

  <!-- Move animation -->
  <circle cx="300" cy="75" r="30" fill="#8b5cf6">
    <animate attributeName="cx" values="280;350;280" dur="1.5s" repeatCount="indefinite"/>
  </circle>
</svg>

Practical Application Examples

Loading Animation (Rotating Dots)

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="15" r="8" fill="#3b82f6" opacity="1"/>
  <circle cx="75" cy="25" r="8" fill="#3b82f6" opacity="0.85"/>
  <circle cx="85" cy="50" r="8" fill="#3b82f6" opacity="0.7"/>
  <circle cx="75" cy="75" r="8" fill="#3b82f6" opacity="0.55"/>
  <circle cx="50" cy="85" r="8" fill="#3b82f6" opacity="0.4"/>
  <circle cx="25" cy="75" r="8" fill="#3b82f6" opacity="0.25"/>
  <circle cx="15" cy="50" r="8" fill="#3b82f6" opacity="0.15"/>
  <circle cx="25" cy="25" r="8" fill="#3b82f6" opacity="0.05"/>
</svg>

Circular Progress Indicator

<svg width="120" height="120" viewBox="0 0 120 120">
  <!-- Background circle -->
  <circle cx="60" cy="60" r="50" fill="none" stroke="#e5e7eb" stroke-width="10"/>
  <!-- Progress circle -->
  <circle cx="60" cy="60" r="50" fill="none" stroke="#3b82f6" stroke-width="10"
          stroke-dasharray="235" stroke-dashoffset="70"
          transform="rotate(-90 60 60)"/>
  <!-- Center text -->
  <text x="60" y="65" text-anchor="middle" font-size="24" font-weight="bold" fill="#1f2937">
    70%
  </text>
</svg>

Avatar Placeholder

<svg width="80" height="80">
  <!-- Background circle -->
  <circle cx="40" cy="40" r="40" fill="#e5e7eb"/>
  <!-- Head -->
  <circle cx="40" cy="32" r="14" fill="#9ca3af"/>
  <!-- Body -->
  <circle cx="40" cy="70" r="20" fill="#9ca3af"/>
</svg>

Traffic Light

<svg width="60" height="160">
  <!-- Frame -->
  <rect x="5" y="5" width="50" height="150" rx="10" fill="#374151"/>
  <!-- Red light -->
  <circle cx="30" cy="35" r="18" fill="#991b1b"/>
  <!-- Yellow light -->
  <circle cx="30" cy="80" r="18" fill="#854d0e"/>
  <!-- Green light (on) -->
  <circle cx="30" cy="125" r="18" fill="#22c55e"/>
</svg>

Social Button

<svg width="50" height="50">
  <circle cx="25" cy="25" r="24" fill="#1da1f2"/>
  <text x="25" y="32" text-anchor="middle" fill="white" font-size="20" font-weight="bold">
    T
  </text>
</svg>

Next Steps

Now that you've learned circles, let's learn about SVG Ellipse!