SVG PIE ANIMATION

by Lio Fleishman

HTML

<svg viewBox="0 0 32 32">
  <circle class="anim" r="16" cx="16" cy="16" />
  <circle class="mask" r="12" cx="16" cy="16" />
</svg>

CSS

svg {
  width: 100px; height: 100px;
  transform: rotate(-90deg);
  background: yellowgreen;
  border-radius: 50%;
}
@keyframes fillup {
  from { stroke-dasharray: 0 100; }
  to { stroke-dasharray: 38 100; }
}

.anim {
  fill: yellowgreen;
  stroke: #655;
  stroke-width: 32;
  stroke-dasharray: 38 100; /* for 38% */
  animation: fillup .5s linear 1;
}

circle {
  fill: #fff;
}