JSFiddle - React, Tailwind, and code Playground

by longsonr

HTML

<svg viewBox="0 0 1900 450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Animating pen strokes in svg</title>
  <desc>
    This shows how to animate stroking, to simulate a pen drawing.
    
    The important parts are the 'stroke-dashoffset' and the corresponding 'stroke-dasharray' values,
    which should really be picked depending on the computed length of the path in question.
    Here they've been hardcoded, but they could just as well be taken live from the browser, here's
    how (note that each browser may give slightly different values, but are usually close to the same):
    
        alert(document.getElementByClass('text').getTotalLength())
    
    This can be written directly to the document by javascript if you need to animate a dynamic path.
  </desc>
  <style>
    .tekst { 
      fill:none;
      stroke:red;
      stroke-width:2px;
      stroke-linecap:round;
    }
    .one {
      stroke-dasharray:3000,3000;
    }
    .two {
      stroke-dasharray:3309,3309;
    }
    text { 
      font-size:40px;
      font-family:stix;
      text-anchor:middle;
    }
  </style>
<script type="text/javascript">
        alert(document.getElementById('text').getTotalLength());

</script>
  <g id="layer1">
    <path id="strikeout" class='tekst one' d="M 10 100 c 28 -30 47 -45 37.2 -37 m 10 -20 l 2 5 m -12 15 c 13 -10 -66 90 -23 50 43 -40 71.58 -69.3 63.8 -53 -1.4 3 -2 -10 -4.8 3 -5.6 26 -16.2 77 -51.2 47 17.5 15 32 0 46.6 -11 14.6 -11 62.34 -53.9 51.4 -19 7.7 -24.5 -18 -20 -36 10 -5.4 9 -11.4 39 5.8 27 1.72 -1.2 12.8 -8 14.4 -9 1.6 -1 17.28 -8.8 43.8 -43 10.8 -14 -30.2 12 34 -5 -25.68 6.8 -58 60 -49 60 5.4 0 4 0 13 -10 9 -10 53.6 -56 43.2 -47 m 10 -20 l 2 5 m -12 15 c 13 -10 -66 90 -23 50 43 -40 46.58 -44.3 46.8 -53 -0.2 2 -58 100 -65 100 -1.4 0 36 -60 56 -80 66 -66 -19 90 -12 20 -2.66 26.6 14 10 30 0 16 -10 74 -90 45 -50 5.8 -8 -41 60 -47 70 36 -60 -3 -20 12 -20 3 0 0 0 5 0 5 0 63 -55 52 -20 12.1 -38.5 -18 -20 -36 10 -14.4...