JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="wavy"></div>

CSS

.wavy {
	display: block;
	width: 600px;
	height: 200px;
  animation: wavyMorph 10s ease-in-out infinite alternate;
  will-change: clip-path;
	background-color: red;
}


@keyframes wavyMorph {
  0% {
    clip-path: shape(from 0 0,vline to 100%,curve to 4.17% calc(100% - 24px) with 2.78% calc(100% - 23px),curve to 6.94% calc(100% - 30px) with 5.56% calc(100% - 25px),curve to 9.72% calc(100% - 17.5px) with 8.33% calc(100% - 35px),curve to 12.5% calc(100% - 1px) with 11.11% calc(100% - 0px),curve to 15.28% calc(100% - 9.5px) with 13.89% calc(100% - 2px),curve to 18.06% calc(100% - 22.5px) with 16.67% calc(100% - 17px),curve to 20.83% calc(100% - 26px) with 19.44% calc(100% - 28px),curve to 23.61% calc(100% - 29px) with 22.22% calc(100% - 24px),curve to 26.39% calc(100% - 30.5px) with 25% calc(100% - 34px),curve to 29.17% calc(100% - 26px) with 27.78% calc(100% - 27px),curve to 31.94% calc(100% - 28.5px) with 30.56% calc(100% - 25px),curve to 34.72% calc(100% - 29.5px) with 33.33% calc(100% - 32px),curve to 37.5% calc(100% - 38.5px) with 36.11% calc(100% - 27px),curve to 40.28% calc(100% - 41px) with 38.89% calc(100% - 50px),curve to 43.06% calc(100% - 25.5px) with 41.67% calc(100% - 32px),curve to 45.83% calc(100% - 14px) with 44.44% calc(100% - 19px),curve to 48.61% calc(100% - 20px) with 47.22% calc(100% - 9px),curve to 51.39% calc(100% - 24.5px) with 50% calc(100% - 31px),curve to 54.17% calc(100% - 11px) with 52.78% calc(100% - 18px),curve to 56.94% calc(100% - 20.5px) with 55.56% calc(100% - 4px),curve to 59.72% calc(100% - 25px) with 58.33% calc(100% - 37px),curve to 62.5% calc(100% - 13px) with 61.11% calc(100% - 13px),curve to 65.28% calc(100% - 17.5px) with 63.89% calc(100% - 13px),curve to 68.06% calc(100% - 22.5px) with 66.67% calc(100% - 22px),curve to 70.83% calc(100% - 31.5px) with 69.44% calc(100% - 23px),curve to 73.61% calc(100% - 35px) with 72.22% calc(100% - 40px),curve to 76.39% calc(100% - 23.5px) with 75% calc(100% - 30px),curve to...