JSFiddle - React, Tailwind, and code Playground

HTML

<div class='btn'>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="140" height="140" viewBox="0 0 140 140">
                        <g class="circles">
                            <circle class="outer-circle" cx="70" cy="70" r="69"></circle>
                            <circle class="inner-circle" cx="70" cy="70" r="69" style="stroke-dashoffset: 433px;"></circle>
                        </g>
                        <path class="triangle" d="M80.728,67.957L64.683,57.879c-1.687-1.069-2.674-1.466-2.674.672v21.5c0,2.138.987,2.413,2.674,1.344l16.046-10.75C82.416,69.575,82.416,69.026,80.728,67.957Z" transform="translate(1 1)"></path>
                    </svg>
</div>

CSS

.outer-circle {
    fill: none;
    stroke: #ebebe5;
    stroke-width: 2px;
}
.inner-circle {
    fill: none;
    stroke: #a32829;
    stroke-width: 3px;
    stroke-dasharray: 433;
    stroke-dashoffset: 433;
}

JavaScript

let btn = document.querySelector('.btn')
let circle = document.querySelector('.inner-circle')

btn.addEventListener('mouseenter', () => {
  let stro = setInterval(() => {
  let rp = +circle.style.strokeDashoffset.replace('px', '')
  	if(rp > 0) {
  		circle.style.strokeDashoffset = rp - 1
    } else {
    	clearInterval(stro)
    }
  },5)
})