<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>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.