JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/jquery.drawsvg/1/jquery.drawsvg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  <svg viewBox="0 0 500 500" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <g>

         <path d="M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z" 
      style="fill:none;stroke:#111;stroke-width:1;"/>
        
    </g>
  </svg>

CSS

svg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

JavaScript

var $svg = $('svg').drawsvg({
      duration: 1000,
      easing: 'easeOutCirc'
    });

$svg.drawsvg('animate');