CSS Doughnut Chart

by JeffC

HTML

<div class="item html">
    <h2>HTML</h2>
    <table border="1">
      <tr>
        <td>
          <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <g>
              <title>HTML</title>
              <circle r="70" cy="100" cx="100" stroke-width="50" stroke="#f2f2f2" fill="none"/>
              <circle class="circle_animation" r="70" cy="100" cx="100" stroke-width="50" stroke="#6fdb6f" fill="none"/>
            </g>
          </svg>
        </td>
      </tr>
    </table>
</div>

<div class="item css">
    <h2>CSS</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#f2f2f2" fill="none"/>
      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#009CCC" fill="none"/>
     </g>
    </svg>
</div>
<p>#009CCC Blue</p>
<p>#E31E26 Red</p>
<p>#339947 Green</p>

CSS

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 170px;
    width: 100%;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation {
    -webkit-animation: html 1s ease-out forwards;
    animation: html 1s ease-out forwards;
}

.css .circle_animation {
    -webkit-animation: css 1s ease-out forwards;
    animation: css 1s ease-out forwards;
}

@-webkit-keyframes html {
  to {
    stroke-dashoffset: 80; /* 50% would be 220 (half the initial value specified above) */
  }
}

@keyframes html {
  to {
    stroke-dashoffset: 80;
  }
}

@-webkit-keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}

@keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}