Как реализовать диаграмму? [дубликат]

.circle-chart__circle { 
  animation: circle-chart-fill 2s reverse; 
  transform: rotate(-90deg); 
  transform-origin: center; 
} 
 
.circle-chart__circle--negative { 
  transform: rotate(-90deg) scale(1, -1); 
} 
 
.circle-chart__info { 
  animation: circle-chart-appear 2s forwards; 
  opacity: 0; 
  transform: translateY(0.3em); 
} 
 
@keyframes circle-chart-fill { 
  to { 
    stroke-dasharray: 0 100; 
  } 
} 
 
@keyframes circle-chart-appear { 
  to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
} 
 
.grid { 
  display: grid; 
  grid-column-gap: 1em; 
  grid-row-gap: 1em; 
  grid-template-columns: repeat(1, 1fr); 
} 
 
@media (min-width: 31em) { 
  .grid { 
    grid-template-columns: repeat(2, 1fr); 
  } 
}

<div class="grid"> 
  <section> 
    <svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> 
      <circle class="circle-chart__background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" /> 
      <circle class="circle-chart__circle" stroke="#00acc1" stroke-width="2" stroke-dasharray="30,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" /> 
      <g class="circle-chart__info"> 
        <text class="circle-chart__percent" x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="8">30%</text> 
        <text class="circle-chart__subline" x="16.91549431" y="20.5" alignment-baseline="central" text-anchor="middle" font-size="2">30% progress!</text> 
      </g> 
    </svg> 
  </section> 
 
</div>