JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-wrapper">
  <div class="single-chart">
    <svg viewBox="0 0 36 36" class="circular-chart orange">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="0, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">30%</text>
      <text x="13" y="27" class="percentage2">ТЕКСТ</text>
    </svg>
  </div>
  
  <div class="single-chart">
    <svg viewBox="0 0 36 36" class="circular-chart green">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="0, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">60%</text>
      <text x="13" y="27" class="percentage2">ТЕКСТ</text>
    </svg>
  </div>

  <div class="single-chart">
    <svg viewBox="0 0 36 36" class="circular-chart blue">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="0, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">80%</text>
      <text x="13" y="27" class="percentage2">ТЕКСТ</text>
    </svg>
  </div>
  <div class="single-chart">
    <svg viewBox="0 0 36 36" class="circular-chart blue">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="0, 100"
    ...

CSS

.flex-wrapper {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  width: 80%;
}

.single-chart {
  width: 100%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 220px;
  transition: all 1s ease;
}

.circle-bg {
  fill: none;
  stroke: #fff;
  stroke-width: 2.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  transition: all 1s ease;
}


.circular-chart.orange .circle {
  stroke: #2faa04;
}

.circular-chart.green .circle {
  stroke: #2faa04;
}

.circular-chart.blue .circle {
  stroke: #2faa04;
}

.percentage {
  fill: #000;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
  position: relative;
}
.percentage2 {
  fill: #000;
  font-family: sans-serif;
  font-size: 0.2em;
  position: relative;
}

.active .orange .circle {
   stroke-dasharray: 30 100;
}

.active .green .circle {
   stroke-dasharray: 60 100;
}

.active .blue .circle {
   stroke-dasharray: 80 100;
}

.active:nth-last-child(1) .blue .circle {
   stroke-dasharray: 100 100;
}

@media only screen and (max-width: 960px){
.flex-wrapper {
  width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
}
.single-chart {
  width: 50%;
}

@media only screen and (max-width: 768px){
.flex-wrapper {
    width: 50%;
    margin: auto;
    flex-wrap: wrap;
}
.single-chart {
  width: 100%;
  justify-content: space-around ;
}

JavaScript

let charts = document.querySelectorAll('.single-chart');

function scrollHandler() {
 charts.forEach(el => window.scrollY >= el.offsetTop ? el.classList.add('active') : false);
}

window.addEventListener('scroll', scrollHandler);