<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
  
  <defs>
    <radialGradient id="gradient2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:#237a84" />
      <stop offset="100%" style="stop-color:#2b866e" />
    </radialGradient>
  </defs>
  
  <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="url(#gradient2)" stroke-width="5"  stroke-dasharray="100" stroke-dashoffset="0"></circle>
 
  <defs>
    <radialGradient id="gradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:#a2508f" />
      <stop offset="100%" style="stop-color:#5a3e84" />
    </radialGradient>
  </defs>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="url(#gradient1)" stroke-width="7"  stroke-dasharray="85" stroke-dashoffset="0"></circle>
  
  <defs>
    <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:#3670ac" />
      <stop offset="100%" style="stop-color:#55599e" />
    </radialGradient>
  </defs>
  <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="url(#gradient)" stroke-width="10"  stroke-dasharray="65" stroke-dashoffset="0"></circle>
</svg>