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;
}
.btn {
  display: inline-block;
}

JavaScript

let btn = document.querySelector('.btn')
let circle = document.querySelector('.inner-circle')
let startInterval = null;
let endInterval = null
btn.addEventListener('mouseenter', () => {
  clearInterval(endInterval)
  startInterval = setInterval(() => {
  let rp = +circle.style.strokeDashoffset.replace('px', '')
  	if(rp > 0) {
  		circle.style.strokeDashoffset = rp - 1
    } else {
    	clearInterval(startInterval)
    }
  },5)
})

btn.addEventListener('mouseleave', () => {
	clearInterval(startInterval)
  endInterval = setInterval(() => {
  let rp = +circle.style.strokeDashoffset.replace('px', '')
  	if(rp < 433) {
  		circle.style.strokeDashoffset = rp + 1
    } else {
    	clearInterval(endInterval)
    }
  },5)
})