JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewbox="0 0 36 36" class="circular-chart">
  <path class="circle" stroke-dasharray="12, 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="50%" y="40%" text-anchor="middle" dy=".3em">12</text>
  <text class="blue" x="50%" y="55%" text-anchor="middle" dy=".3em">xx</text>
</svg>
<svg viewbox="0 0 36 36" class="circular-chart">
  <path class="circle" stroke-dasharray="40, 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="50%" y="40%" text-anchor="middle" dy=".3em">40</text>
  <text class="blue" x="50%" y="55%" text-anchor="middle" dy=".3em">xx</text>
</svg>
<svg viewbox="0 0 36 36" class="circular-chart">
  <path class="circle" stroke-dasharray="55, 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="50%" y="40%" text-anchor="middle" dy=".3em">55</text>
  <text class="blue" x="50%" y="55%" text-anchor="middle" dy=".3em">xx</text>
</svg>

CSS

svg {
  width: 200px;
}

JavaScript

$(function() {
      // loops through all <path> elements with the class 'circle'
      $('path.circle').each(function() {
          // $(this) refers to the current <path> element
          // gets the text value of the first <text> child element
          var score = parseInt($(this).siblings('text').first().text());

          var color = 'red';
          if (score >= 40) {
            color = 'green';
          }
          // set the color of the current element
          $(this).css('stroke', color);
        });
});