JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="806.76" height="563.204" viewBox="0 0 806.76 563.204">
    <path d="M479.759,759.4s.518-512.888,160.755-512.888S733.036,770.339,853.4,759.4s101.816-512.89,239.06-512.89S1236.18,759.4,1236.18,759.4" transform="translate(-454.734 -221.51)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="50px" class="zXmcYVJG_0" filter="url(#imageIn)"></path>
    <style data-made-with="vivus-instant">
        .zXmcYVJG_0 {
            stroke-dasharray: 2318 2320;
            stroke-dashoffset: 2319;
        }

        .start .zXmcYVJG_0 {
            animation: zXmcYVJG_draw 3000ms ease-in-out 0ms forwards;
        }

        @keyframes zXmcYVJG_draw {
            100% {
                stroke-dashoffset: 0;
            }
        }

        @keyframes zXmcYVJG_fade {
            0% {
                stroke-opacity: 1;
            }

            94.44444444444444% {
                stroke-opacity: 1;
            }

            100% {
                stroke-opacity: 0;
            }
        }
    </style>
  <filter id="imageIn">
    <feImage href="https://upload.wikimedia.org/wikipedia/commons/5/5d/BurningFlame0.gif" width="807x" />
    <feComposite in2="SourceGraphic" operator="in"/>
  </filter>
</svg>

JavaScript

window.onload = function() {
  document.querySelector('svg').classList.add('start');
};