JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
</head>
<body>
    <div id='svg1'>
<ssvg viewBox="0 0 700 350" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Animating pen strokes in svg</title>
  <style>
    .tekst { 
      fill:none;
      stroke:black;
      stroke-width:2px;
      stroke-linecap:round;
    }
    .three {
      stroke-dasharray:800,800;
    }
    text {
      font-size:40px;
      font-family:stix;
      text-anchor:middle;
    }
  </style>
  <g id="layer1">
    <path id="strikeout3" class='tekst three' d="M 40.000 200  c 10 -30 20 -90 15 -50 1 -8 -5 60 -5 70 0 -60 -15 -20 0 -20 3 0 0 0 5 0 5 0 30 -75 40 -20 -40 -75 -20 110 2 10 6.600 -30 -4 -7 0 0">
      <animate attributeName="stroke-dashoffset" from="800" to="0" dur="4s" begin="0s"/>
    </path>
  </g>
</ssvg>
    </div>
    <div id="svg2">
            <ssvg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="-20 0 220 250"><g stroke="red" stroke-width="2" fill="none" transform="scale(1)"><path id="line" class="no" d="M 20 40  l 100 0 0 40 50 -40 -50 -40 0 20"></path></g></ssvg>
    </div>

            <svg>
    </svg>
</body>
</html>

CSS

.tekst { 
      fill:none;
      stroke:black;
      stroke-width:2px;
      stroke-linecap:round;
    }
    .three {
      stroke-dasharray:800,800;
    }
    text {
      font-size:40px;
      font-family:stix;
      text-anchor:middle;
    }

JavaScript

$(document).ready(function() {
    $('svg').replaceWith($('#svg2').html().replace(/ssvg/g,'svg'));
    setTimeout(function() {
        $('svg').replaceWith($('#svg1').html().replace(/ssvg/g,'svg'));
}, 5000);
});