JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<button>Go</button>

JavaScript

var s = Snap(400, 500);

var d1 = "M260,500H0c0,0,0-120,0-250C0,110,0,0,0,0h260c0,0,0,110,0,250C260,380,260,500,260,500z";
var d2 = "M260,500H0c0,0,8-120,8-250C8,110,0,0,0,0h260c0,0-8,110-8,250C252,380,260,500,260,500z";

var path = s.path(d1);

$("button").click(function() {
    path.animate({d: d2}, 200, mina.easeinout, function() {
        path.animate({d: d1}, 200, mina.easeinout);
    });
});