JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wr">

<svg viewBox="0 0 106 106">
<path class="st1" d="M53,3c27.429,0,50,22.571,50,50c0,27.43-22.572,50-50,50C25.495,103,2.989,80.303,3,53
	C3.011,26.095,24.884,3.662,51,3"/>
  <foreignobject width="100%" height="100%">
    <!-- Здесь любой HTML контент, иконки, блоки, тексты, что угодно -->
    <div>1</div>
    <!-- end -->
  </foreignobject>
</svg>

<svg viewBox="0 0 106 106">
<path class="st2" d="M53,3c27.429,0,50,22.571,50,50c0,27.43-22.572,50-50,50C25.495,103,2.989,80.303,3,53
	C3.011,26.095,24.884,3.662,51,3"/>
  <foreignobject width="100%" height="100%">
    <div>2</div>
  </foreignobject>
</svg>

<svg viewBox="0 0 106 106">
<path class="st3" d="M53,3c27.429,0,50,22.571,50,50c0,27.43-22.572,50-50,50C25.495,103,2.989,80.303,3,53
	C3.011,26.095,24.884,3.662,51,3"/>
  <foreignobject width="100%" height="100%">
    <div>3</div>
  </foreignobject>
</svg>


</div>

SCSS

body {
  margin: 0px;
  padding: 0px;
}
.wr {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around
}
svg {
  width: 100px;
  cursor: pointer;
  path {
    fill:#fff;
    stroke-width:6;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 313;
		stroke-dashoffset: 313.5;
    transition: all 0.5s ease;
    &.st1 {
      stroke:#f95428;
    }
    &.st2 {
      stroke:#f7bc48;
    }
    &.st3 {
      stroke:#b5dd7b;
    }
   }
   &:hover path {
     stroke-dashoffset: 0;
   }
   div {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     font-size: 40px;
     font-family: tahoma;
     position: absolute;
   }
}

JavaScript

/*

Ответ на вопрос: https://toster.ru/q/405676

*/