JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="176" height="144" viewBox="-352 -288 176 144">
  <path transform="matrix(1 0 0 1 -353.323 -288.241)" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" d="M35.690,117.025C35.690,117.025,35.632,117.079,35.632,117.079C35.632,117.079,35.720,116.985,35.720,116.985C35.720,116.985,35.676,116.996,35.676,116.996C35.676,116.996,35.603,117.051,35.603,117.051C35.603,117.051,35.772,117.030,35.772,117.030C35.772,117.030,35.705,116.999,35.705,116.999C35.705,116.999,35.690,116.973,35.690,116.973C35.690,116.973,35.725,116.978,35.725,116.978C35.725,116.978,35.699,116.996,35.699,116.996C35.699,116.996,35.705,117.015,35.705,117.015C35.705,117.015,35.741,116.943,35.741,116.943C35.741,116.943,35.689,117.039,35.689,117.039C35.689,117.039,35.721,117.014,35.721,117.014C35.721,117.014,35.635,116.932,35.635,116.932">
    <animate attributeName="d" fill="freeze"...