JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="box">
  <div class="box__background">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283 445">
      <defs>
        <filter id="shadow">
          <feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="#000" flood-opacity=".25" />
        </filter>
      </defs>
      <path filter="url(#shadow)" d="M273.86,386.57C273.86,386.57,145.36,386.57,145.36,386.57C142.89,386.57,140.11,386.57,137.63,386.57C137.63,386.57,9.14,386.57,9.14,386.57C5.42,385.01,3,381.38,3,377.35C3,377.35,3,13,3,13C3,7.48,7.48,3,13,3C13,3,270,3,270,3C275.52,3,280,7.48,280,13C280,13,280,377.35,280,377.35C280,381.38,277.58,385.01,273.86,386.57C273.86,386.57,273.86,386.57,273.86,386.57"/>
    </svg>
  </div>
</div>

CSS

.box {
  width: 35%;
  margin: 0 auto;
}

.box__background {
  position: relative;
  width: 100%;
  padding-top: 158%;
}

.box__background svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: #fff;
}

JavaScript

function mouseEnterBox() {
  anime({
    targets: '.box__background path',
    d: [
      { value: 'M273.86,386.57C273.86,386.57,145.36,386.57,145.36,386.57C142.89,386.57,140.11,386.57,137.63,386.57C137.63,386.57,9.14,386.57,9.14,386.57C5.42,385.01,3,381.38,3,377.35C3,377.35,3,13,3,13C3,7.48,7.48,3,13,3C13,3,270,3,270,3C275.52,3,280,7.48,280,13C280,13,280,377.35,280,377.35C280,381.38,277.58,385.01,273.86,386.57C273.86,386.57,273.86,386.57,273.86,386.57' },
      { value: 'M273.86,386.57C273.86,386.57,145.36,440.38,145.36,440.38C142.89,441.41,140.11,441.41,137.63,440.38C137.63,440.38,9.14,386.57,9.14,386.57C5.42,385.01,3,381.38,3,377.35C3,377.35,3,13,3,13C3,7.48,7.48,3,13,3C13,3,270,3,270,3C275.52,3,280,7.48,280,13C280,13,280,377.35,280,377.35C280,381.38,277.58,385.01,273.86,386.57C273.86,386.57,273.86,386.57,273.86,386.57' },
    ],
    easing: 'linear',
    duration: 1000,
  });
}

function mouseLeaveBox() {
  anime({
    targets: '.box__background path',
    d: [
      { value: 'M273.86,386.57C273.86,386.57,145.36,440.38,145.36,440.38C142.89,441.41,140.11,441.41,137.63,440.38C137.63,440.38,9.14,386.57,9.14,386.57C5.42,385.01,3,381.38,3,377.35C3,377.35,3,13,3,13C3,7.48,7.48,3,13,3C13,3,270,3,270,3C275.52,3,280,7.48,280,13C280,13,280,377.35,280,377.35C280,381.38,277.58,385.01,273.86,386.57C273.86,386.57,273.86,386.57,273.86,386.57' },
      { value: 'M273.86,386.57C273.86,386.57,145.36,386.57,145.36,386.57C142.89,386.57,140.11,386.57,137.63,386.57C137.63,386.57,9.14,386.57,9.14,386.57C5.42,385.01,3,381.38,3,377.35C3,377.35,3,13,3,13C3,7.48,7.48,3,13,3C13,3,270,3,270,3C275.52,3,280,7.48,280,13C280,13,280,377.35,280,377.35C280,381.38,277.58,385.01,273.86,386.57C273.86,386.57,273.86,386.57,273.86,386.57' },
    ],
    easing: 'linear',
    duration: 1000,
  });
}

const boxBg = document.querySelector('.box__background');
boxBg.addEventListener('mouseenter', mouseEnterBox, false);
boxBg.addEventListener('mouseleave', mouseLeaveBox, false);