SVG pie

by jpeter06

HTML

<svg width="400" height="300">
  <g transform="translate(20 20) rotate(-90 50 50)">
    <circle class="piesvg" r="50" cx="50" cy="50" />
    <circle class="piesvg" id="c1" r="25" cx="50" cy="50"  
      style="stroke-dasharray: 60 158; stroke-width: 50;"
      />
  </g>
  <g transform="translate(160 20) rotate(-90 50 50)">
    <circle class="piesvg" r="30" cx="30" cy="30" />
    <circle  class="piesvg" id="c1" r="15" cx="30" cy="30"
      style="stroke-dasharray: 30 94;stroke-width: 30;"/>
  </g>  
    <g transform="translate(160 120) rotate(-90 50 50)">
    <circle class="piesvg" r="20" cx="20" cy="20" />
    <circle  class="piesvg" id="c1" r="10" cx="20" cy="20"
      style="stroke-dasharray: 50 94;stroke-width: 20;"/>
  </g>  

</svg>

CSS

.piesvg {
  fill: yellowgreen;
  stroke: #ac32cd;
  stroke-width: 0;
}

#c1{
   /* 2π × 25 ≈ 158 */
}

circle:hover(fill:red)