JSFiddle - React, Tailwind, and code Playground
HTML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 266 250">
<defs>
<clipPath id="clip-path">
<path d="M165.81,179.65a107.5938,107.5938,0,0,0-48.73-84.38,105.8285,105.8285,0,0,0-9.9-5.75l-5.76,9.97L81.91,133.28l-5.78,10.01a45.9028,45.9028,0,0,1,27.57,36.36,44.9319,44.9319,0,0,1,.36,5.72,45.5226,45.5226,0,0,1-.36,5.75h11.57l39.01.01h11.53q.15-2.865.15-5.76C165.96,183.45,165.91,181.55,165.81,179.65Z" fill="none"/>
</clipPath>
</defs>
<g fill="none" stroke="#bb9632" stroke-width="11.5" clip-path="url(#clip-path)">
<circle cx="58.4117" cy="185.365" r="26.2">
<animate
attributeName="r"
from="26.2"
to="126.95"
dur="10000ms"
repeatCount="indefinite"
begin="0ms"
/>
</circle>
<circle cx="58.4117" cy="185.365" r="51.4">
<animate
attributeName="r"
from="26.2"
to="126.95"
dur="10000ms"
repeatCount="indefinite"
begin="-2500ms"
/>
</circle>
<circle cx="58.4117" cy="185.365" r="76.6">
<animate
attributeName="r"
from="26.2"
to="126.95"
dur="10000ms"
repeatCount="indefinite"
begin="-5000ms"
/>
</circle>
<circle cx="58.4117" cy="185.365" r="101.8">
<animate
attributeName="r"
from="26.2"
to="126.95"
dur="10000ms"
repeatCount="indefinite"
begin="-7500ms"
/>
</circle>
</g>
<g fill="none" stroke="#bb9632" stroke-width="11.5">
<line id="border-bottom" x1="84.6368" y1="185.3658" x2="185.4368" y2="185.3658" stroke-dasharray="25.2 25.2" stroke-dashoffset="0">
<animate
attributeName="stroke-dashoffset"
from="0"
to="-100.8"
dur="10000ms"
repeatCount="indefinite"
begin="0ms"
/>
</line>
<line id="border-left" x1="71.6095" y1="162.8001" x2="122.0095" y2="75.5048" stroke-dasharray="25.2 25.2" stroke-dashoffset="25.2">
<animate
...