JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<svg onclick="animateMe()" viewBox="0 0 1713 1084" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="box" d="M 0 0 L 1920 0 L 1920 1080 C 1920 1080 1439.16 995 951.594 995 C 464.028 995 0 1080 0 1080 L 0 0 Z" fill="#bf211e"/>
</svg>

CSS

/* svg {
  width: 500px;
} */

JavaScript

function animateMe() {
	var box = document.querySelector('.box');
  let shapes = [
    {
      d: "M 0 0 L 1920 0 L 1920 1080 C 1920 1080 1439.16 995 951.594 995 C 464.028 995 0 1080 0 1080 L 0 0 Z"
    },
    {
      d: "M 0 0 L 1920 0 L 1920 1080 C 1600 1080 1280 1080 960 1080 C 640 1080 320 1080 0 1080 L 0 0 Z0 Z"
    }
  ];

  anime({
    targets: box,
    d: [
        /* {value: shapes[0].d}, */
        {value: shapes[1].d}
    ],
    easing: "easeInOutQuad",
    duration: 1000,
    elasticity: 100
  });
}