SVG PIE

by Mike Gifford

HTML

<svg viewBox="0 0 64 64" class="pie">
  <circle r="25%" cx="50%" cy="50%" style="stroke-dasharray: 20%">
  </circle>
  <circle r="25%" cx="50%" cy="50%" style="stroke-dasharray: 20%; stroke: green; stroke-dashoffset: -75.3;">
  </circle>
  <circle r="25%" cx="50%" cy="50%" style="stroke-dasharray: 20%; stroke: blue; stroke-dashoffset: -95.2;">
  </circle>
  <circle r="25%" cx="50%" cy="50%" style="stroke-dasharray: 20%; stroke: orange; stroke-dashoffset: -97.5;">
  </circle>
  <circle r="25%" cx="50%" cy="50%" style="stroke-dasharray: 20$; stroke: red; stroke-dashoffset: -98.9;">
  </circle>
</svg>

CSS

.pie {
  width: 400px;
  background: #f06;
  border-radius: 50%;
}


.pie circle {
  fill: none;
  stroke: orange;
  stroke-width: 32;
  animation: rotate 1.5s ease-in;
}

@keyframes rotate {
  to {
    x
  } 
}