JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="300" height="300" viewBox="0 0 300 300">
 <g>
    <path id="b1" class="b1" d="M95.4,204.9a31.7,31.7,0,0,1,23,9.6,32.8,32.8,0,0,1,6.9,10.8,38.7,38.7,0,0,1,0,27.4,32.8,32.8,0,0,1-6.9,10.8,31.7,31.7,0,0,1-23,9.6,25.7,25.7,0,0,1-11.9-2.6,25.4,25.4,0,0,1-8.3-6.8v7.7H61V174H75.1v40.3a25.4,25.4,0,0,1,8.3-6.8A25.7,25.7,0,0,1,95.4,204.9Zm-1.7,13.3a19.5,19.5,0,0,0-8,1.6,18.5,18.5,0,0,0-6.1,4.4,19.7,19.7,0,0,0-4,6.6,24.6,24.6,0,0,0,0,16.5,19.7,19.7,0,0,0,4,6.6,18.5,18.5,0,0,0,6.1,4.4,20.9,20.9,0,0,0,16.1-.1,18.1,18.1,0,0,0,6.1-4.5,19.7,19.7,0,0,0,3.9-6.6,24.6,24.6,0,0,0,0-16.1,19.8,19.8,0,0,0-3.9-6.6,18.1,18.1,0,0,0-6.1-4.5A19.6,19.6,0,0,0,93.7,218.2Z"
  transform="translate(-60.5 -173.5)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" /> <path id="o1" class="o1"  d="M172.5,204.9a36.5,36.5,0,0,1,13.9,2.6,33.9,33.9,0,0,1,11,7.2,32.8,32.8,0,0,1,7.3,10.8,35.9,35.9,0,0,1,0,27,32.7,32.7,0,0,1-7.3,10.8,33.9,33.9,0,0,1-11,7.2,38.4,38.4,0,0,1-27.8,0,33.5,33.5,0,0,1-11-7.2,33,33,0,0,1-7.3-10.8,35.9,35.9,0,0,1,0-27,33.1,33.1,0,0,1,7.3-10.8,33.6,33.6,0,0,1,11-7.2A36.5,36.5,0,0,1,172.5,204.9Zm0,13.3a21,21,0,0,0-8,1.5,19,19,0,0,0-6.4,4.3,19.8,19.8,0,0,0-4.3,6.6,23.5,23.5,0,0,0,0,16.8,19.8,19.8,0,0,0,4.3,6.6,19,19,0,0,0,6.4,4.3,22,22,0,0,0,16.1,0,19.4,19.4,0,0,0,6.5-4.3,19.6,19.6,0,0,0,4.3-6.6,23.6,23.6,0,0,0,0-16.8A19.6,19.6,0,0,0,187,224a19.4,19.4,0,0,0-6.5-4.3A21,21,0,0,0,172.5,218.2Z" transform="translate(-60.5 -173.5)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
 </g>
</svg>

CSS

.b1, .o1 {
  animation: stroke_fill 4s linear forwards;
  stroke-dasharray: 324.774;
  stroke-dashoffset: 324.774;
}
@keyframes stroke_fill {
  0% {
    fill: white;
  }
  50% {
    fill: white;
    stroke-dashoffset: 0;
  }
  100% {
    fill: black;
    stroke-dashoffset: 0;
  }
}