<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<svg  viewbox="0 0 42 42" class="lessons-dount donut" style="display:none;">
  <circle class="donut-hole" cx="21" cy="21" r="16">
  </circle>
  <circle class="donut-ring" cx="21" cy="21" r="16">
  </circle>
  <circle class="donut-segment" cx="21" cy="21" r="16">
  </circle>
  <g class="chart-text">
    <text x="50%" y="50%" class="chart-number">
    </text>
    <text x="50%" y="50%" class="chart-label">
    </text>
  </g>
</svg>

<!-- ВСЁ ЧТО НИЖЕ КОПИРОВАТЬ НЕ НУЖНО -->

<div class="xdget-block xdget-trainingAchievements xdget-visible-to-bg-" id="xdgetr7190" data-xdget-id="r7190">
  <table class="table" style="margin-bottom: 10px">
    <thead>
      <tr>
        <th colspan="2">Ваши достижения
        </th>
      </tr>
    </thead>
    <tbody>
      <tr> <td>
          <a style="font-weight: normal" href="/pl/user/scale/view-results?id=23132&userId=48812859">Шкала достижений</a></td>
        <td class="text-right">
          <span class="badge" style="margin-top: 3px;">21 балл
          </span></td>
      </tr>
    </tbody>
  </table>
</div>

.xdget-trainingAchievements {
   display:none;
}
svg.lessons-dount {
  width:250px;
  height:250px;
  display:block!important;
}
svg.lessons-dount .donut-hole {
  fill: white; /* цвет дырки */
}
svg.lessons-dount .donut-ring {
  stroke: #d2d3d4; /* цвет кольца */
  stroke-width: 3; /* толщина кольца */
  fill: transparent;
}
svg.lessons-dount .donut-segment {
  stroke: #ce4b99; /* цвет заполнения */
  stroke-width: 3; /* толщина заполнения */
  fill: transparent;
  stroke-dasharray: "0 100";
  stroke-dashoffset: 25;
}
.chart-text {
  font: 16px/1.4em 'Montserrat', Arial, sans-serif;
  fill: #000;
  -moz-transform: translateY(0.25em);
  -ms-transform: translateY(0.25em);
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
}
.chart-number {
  font-size: 0.6em;
  line-height: 1;
  text-anchor: middle;
  -moz-transform: translateY(-0.25em);
  -ms-transform: translateY(-0.25em);
  -webkit-transform: translateY(-0.25em);
  transform: translateY(-0.25em);
}
.chart-label {
   font-size: 0.2em;
   text-transform: uppercase;
   text-anchor: middle;
   -moz-transform: translateY(0.7em);
   -ms-transform: translateY(0.7em);
   -webkit-transform: translateY(0.7em);
   transform: translateY(0.7em);
}

$(function(){
  
  var total = 38;
  var score = $('.xdget-trainingAchievements .badge').html().split(' ')[0];
  
  $('.lessons-dount .donut-segment')
    .animate(
        { x: 100 },
        {
            duration: 2000,
            step: function(now) { $(this).attr('stroke-dasharray', now*(score*100/total)/100+" "+(100-now*(score*100/total)/100));  }
        });
  $('.lessons-dount .chart-number').html(score);
  $('.lessons-dount .chart-label').html("из "+total+" уроков");
});