<svg viewBox="-250 -250 500 500" width="200">
  <circle r="200" class="overlay" />

  <g class="chart">
    <circle r="200" class="sector1" />
  </g>
</svg>

<svg viewBox="-250 -250 500 500" width="200">
  <circle r="200" class="overlay" />

  <g class="chart">
    <circle r="200" class="sector2" />
  </g>
</svg>

<svg viewBox="-250 -250 500 500" width="200">
  <circle r="200" class="overlay" />
  <g class="chart">
    <circle r="200" class="sector3" />
  </g>
</svg>

:root {
  --c1: blue;
  --c2: red;
  --c3: green;
}

.overlay {
  fill: none;
  stroke: #999;
  stroke-opacity: 0.2;
  stroke-width: 50px;
}

.overlay {
  fill: none;
  stroke: #999;
  stroke-width: 50px;
}

.chart circle {
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sector1 {
  fill: none;
  stroke: var(--c1);
  stroke-width: 50px;
  stroke-dasharray: 0 1300;
  transform: rotate(-90deg);
  animation: draw 1.5s cubic-bezier(0.1, 0.1, 1, 3) forwards;
}

.sector2 {
  fill: none;
  stroke: var(--c2);
  stroke-width: 50px;
  stroke-dasharray: 0 1300;
  transform: rotate(-90deg);
  animation: draw1 2s cubic-bezier(0.01, 1, 1, 1.5) forwards;
}

.sector3 {
  fill: none;
  stroke: var(--c3);
  stroke-width: 50px;
  stroke-dasharray: 0 1300;
  transform: rotate(-90deg);
  animation: draw2 1s cubic-bezier(0.01, 1.01, 1, 6) forwards;
}

@keyframes draw {
  from {
    stroke-dasharray: 0 1300;
  }
  to {
    stroke-dasharray: 500 1300;
  }
}

@keyframes draw1 {
  from {
    stroke-dasharray: 0 1300;
  }
  to {
    stroke-dasharray: 900 1300;
  }
}

@keyframes draw2 {
  from {
    stroke-dasharray: 0 1300;
  }
  to {
    stroke-dasharray: 250 1300;
  }
}