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 class="box__content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nulla voluptatum perferendis totam. Id ratione, incidunt iste provident possimus dicta iusto. Minus dolores molestiae, vero mollitia tempora deleniti excepturi dicta! Repellat, excepturi. Magni fuga quas error ea quod impedit alias facilis odio corporis, cupiditate voluptatum reiciendis provident quisquam ratione, fugiat aliquam cumque labore suscipit asperiores veniam perferendis laboriosam adipisci voluptatibus, quia.
  </div>
</div>

CSS

.box {
  width: 50%;
  margin: 0 auto;
  position: relative;
}

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

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

.box__content {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

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);