JSFiddle - React, Tailwind, and code Playground

HTML

<svg ng-attr-height="{{size}}" ng-attr-width="{{size}}" height="130" width="130">
<!-- ngIf: background -->
<circle ng-attr-stroke-width="{{strokeWidthCapped}}" ng-attr-stroke="{{background}}" ng-attr-r="{{radius}}" ng-attr-cy="{{size/2}}" ng-attr-cx="{{size/2}}" ng-if="background" fill="#fff" class="ng-scope" stroke-width="13" stroke="#cc3399" r="57.5" cy="65" cx="65" stroke-linecap="round" />

<!-- end ngIf: background -->
<circle ng-attr-transform="rotate({{offset}}, {{size/2}}, {{size/2}}){{ (counterClockwise &amp;&amp; counterClockwise != 'false') ? ' translate(0, ' + size + ') scale(1, -1)' : '' }}" ng-attr-stroke-dashoffset="{{(1 - complete()) * circumference}}" ng-attr-stroke-dasharray="{{circumference}}" ng-attr-stroke-width="{{strokeWidthCapped}}" ng-attr-stroke="{{stroke}}" ng-attr-r="{{radius}}" ng-attr-cy="{{size/2}}" ng-attr-cx="{{size/2}}" fill="none" stroke-dashoffset="36.12831551628261" stroke-dasharray="361.28315516282623" stroke-width="13" stroke="#432db3" stroke-linecap="round" r="57.5" cy="65" cx="65" transform="rotate(-89.9, 65, 65)"/>
</svg>