SVG Ring/Donut

by Jawad Nasser

HTML

<!-- Donut/Ring reference, StackOverflow source: http://stackoverflow.com/questions/8193675/draw-a-hollow-circle-in-svg/8199621#8199621 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800px" height="800px">

  <!-- Reference circle -->
  <circle cx="100" cy="200" r="10" fill="gray" class="shape" />

  <!-- Ring/Donut centered at (100, 200) with outer radius 100 and inner radius 75 -->
  <!-- Note that there's a single pixel missing in the stroke along the outside -->
  <path class="shape" fill="blue" stroke="red" d="
            M 100, 200 
            m 0 -100 
            a 100 100 0 1 0 1 0
            z
            m -1 25    
            a 75 75 0 1 1 -1 0     
            Z" />

  <!-- Ring/Donut centered at (100, 200) with outer radius 70 and inner radius 50 -->
  <path class="shape" fill="green" stroke="black" d="
            M 100, 200 
            m 0 -70 
            a 70 70 0 1 0 1 0
            z
            m -1 20    
            a 50 50 0 1 1 -1 0     
            Z" />

  <!-- Ring/Donut centered at (100, 200) with outer radius 25 and inner radius 15 -->
  <path class="shape" fill="skyblue" stroke="none" d="
            M 100, 200 
            m 0 -25
            a 25 25 0 1 0 1 0
            Z
            m -1 10    
            a 15 15 0 1 1 -1 0     
            Z" />

</svg>

CSS

/* Simulating interactivity */
.shape {
  opacity: 0.6;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.shape:hover {
  opacity: 1;
}

JavaScript

// M cx, cy // Move to center of ring
// m 0, -outerRadius // Move to top of ring
// a outerRadius, outerRadius, 0, 1, 0, 1, 0 // Draw outer arc, but don't close it
// Z // Close the outer shape
// m -1 outerRadius-innerRadius // Move to top point of inner radius
// a innerRadius, innerRadius, 0, 1, 1, -1, 0 // Draw inner arc, but don't close it
// Z // Close the inner ring. Actually will still work without, but inner ring will have one unit missing in stroke