<div class="blob"></div>

body {
  display: grid;
  place-content: center;
  background-color: #112;
  margin: 0;
  height: 100vh;
}

.blob {
  width: 215px;
  height: 215px;
  background: linear-gradient(45deg, #3023AE 0%, #f09 100%) #f09;
}

const lerp = (a, b, t) => a * (1 - t) + b * t;

const blob = document.querySelector('.blob');
const dur = Array.from({ length: 4 }, () => lerp(5e3, 10e3, Math.random()));

function update(now) {
  const s = dur.map(d => lerp(30, 70, Math.abs(now / d % 1 - 0.5) * 2));

  blob.style.borderRadius = `
    ${s[0]}% ${100 - s[0]}% ${100 - s[2]}% ${s[2]}% /
    ${s[3]}% ${s[1]}% ${100 - s[1]}% ${100 - s[3]}%`;

  requestAnimationFrame(update);
}

requestAnimationFrame(update);