JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 744.094 871.654">
  <g strokeWidth="4.248"
     strokeMiterlimit="1"
     fillOpacity= '.5' 
     fill = 'none'
     stroke = 'rgba(255, 255, 255, 0.5)'>
    <defs>
      <linearGradient id="myGrad" >
        <stop offset="0%" stop-color="yellow" />
        <stop offset="25%" stopColor="green" />
        <stop offset="50%" stopColor="blue" />
        <stop offset="75%" stopColor="purple" />
        <stop offset="100%" stopColor="red" />
      </linearGradient>
    </defs>

      <g id='bar'>
        <path d="M740.096 599.704c-.027-8.88-7.245-16.055-16.123-16.028-8.88.03-16.055 7.248-16.028 16.127.014 4.4 1.8 8.377 4.668 11.272-8.59 28.308-21.002 55.294-37.011 80.391A328.59 328.59 0 0 1 635.908 742l-.266-.25a363.91 363.91 0 0 1-26.633 25.27 16.081 16.081 0 0 0-6.03-1.157c-8.877.027-16.054 7.246-16.025 16.125.002.803.08 1.583.198 2.35a347.143 347.143 0 0 1-6.908 4.942c-32.778 22.805-68.54 39.69-106.458 50.321a16.04 16.04 0 0 0-11.487-4.781c-7.366.022-13.545 5.004-15.425 11.768a382.23 382.23 0 0 1-64.675 5.518c-.74 0-1.483 0-2.226-.01a381.546 381.546 0 0 1-97.874-13.344c-1.671-7.411-8.299-12.947-16.216-12.925a16.533 16.533 0 0 0-10.72 3.992 387.615 387.615 0 0 1-55.212-25.694 387.43 387.43 0 0 1-70.985-51.554c.345-1.34.548-2.741.545-4.197-.031-9.154-7.475-16.551-16.63-16.527a16.874 16.874 0 0 0-3.306.344 347.345 347.345 0 0 1-35.2-46.19 346.111 346.111 0 0 1-37.443-79.483 16.52 16.52 0 0 0 4.7-11.606c-.03-9.154-7.473-16.554-16.629-16.527-9.157.028-16.556 7.476-16.527 16.63.024 7.932 5.62 14.537 13.065 16.146a362.193 362.193 0 0 0 39.28 83.476 363.588 363.588 0 0 0 36.575 48.045 16.476 16.476 0 0 0-1.042 5.794c.025 9.154 7.47 16.556 16.626 16.528a16.46 16.46 0 0 0 4.932-.76 403.53 403.53 0 0 0 74.128 53.867 403.134 403.134 0 0 0 57.52 26.77c1.203 8 8.095 14.133 16.424 14.109a16.53 16.53 0 0 0 11.606-4.8 397.583 397.583 0 0 0 14.54 3.959l.07-.279a397.86 397.86 0 0 0 87.68 10.298c.775.01 1.545.01...