<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" width="500" class="sr-only">
  <defs>
    <clipPath id="blob-1">
      <path d="M413.5,344Q359,438,257,426Q155,414,88.5,332Q22,250,78,149.5Q134,49,247,54Q360,59,414,154.5Q468,250,413.5,344Z" fill="#d1d8e0"></path>
    </clipPath>
    <clipPath id="blob-2">
      <path d="M332,291.5Q202,333,211.5,266.5Q221,200,341.5,225Q462,250,332,291.5Z" fill="#d1d8e0">
    </clipPath>
  </defs>
</svg>

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

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Exo", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  background: linear-gradient(to bottom, #0b0a27, #31304c 50%);
}

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.blob {
  width: 500px;
  height: 500px;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  position: relative;
  animation: blob 5s ease infinite;
}

@keyframes blob {
  0% {
    clip-path: url(#blob-1);
    background-position: 0% 50%;
  }
  50% {
    clip-path: url(#blob-2);
    background-position: 100% 50%;
  }
  100% {
    clip-path: url(#blob-1);
    background-position: 0% 50%;
  }
}