JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<svg id="morph" height="100%" width="100%" viewBox="0 0 1920 1080" preserveAspectRatio="none">
        <path class="morph" d="M0,0V51.6S171.364,28.832,294,28.832,686,64,906,64s339.11-29.212,642-29.212S1920,51.6,1920,51.6V0Z"  fill="#5352ed"></path>
    </svg>

JavaScript

var morphing = anime({
             targets: '.morph',
             d: [
                 { value: 'M0,0V388.6s171.364-171.46,294-171.46S686,482,906,482s339.11-220,642-220,372,126.6,372,126.6V0Z'},
                 { value: 'M0,0V2008.349s171.364-886.136,294-886.136S686,2491.061,906,2491.061s339.11-1137,642-1137,372,654.287,372,654.287V0Z'},
             ],
             easing: 'easeInOutQuint',
             duration: 1300,
             loop: false,
             autoplay: false
         });

morphing.play();