JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<div></div>

CSS

* {
  margin: 0;
  padding: 0;
}

div {
  width: 80vh;
  height: 80vh;
  margin: 10vh auto;
  background: crimson;
  border-radius: 45% 55% 47% 53% / 30% 45% 55% 70%;
  transition: all .8s;
}

JavaScript

const div = document.querySelector('div');

const tick = () => {
  const r = () => ~~(Math.random() * 100);
  const r2 = () => {
    const x = r();
    return [`${x}%`, `${100 - x}%`]
  };
  const [
    [a, b],
    [c, d],
    [e, f],
    [g, h]
  ] = [r2(), r2(), r2(), r2()];
  div.style.borderRadius = `${a} ${b} ${c} ${d} / ${e} ${g} ${h} ${f}`;
};

tick();
setInterval(tick, 1200);