<div class="blob-wobble"></div>
<h1>PURE CSS BLOB WOBBLE ANIMATION</h1>

:root {
  --random_bg: url(https://source.unsplash.com/random)
}


body {
  display:grid;
  height: 100vh;
  place-items: center;
  width: 100%;
  position: relative;
  z-index: 0;
  padding: 0;  
  margin: 0;
  overflow: hidden;
}



body:after {
  position: absolute;
  content: "";
  top: -4%; bottom: -4%; left: -4% ; right: -4%;
  background:var(--random_bg);
  background-size: 150%;
  background-position: center center;
  z-index: 0;
  filter: blur(5px) brightness(150%) contrast(10%);
}

h1 {
  color: #bbb;
  letter-spacing: 15px;
  font-weight: 100;
  font-size: 30px;
  z-index: 1
}

/* CSS to create the blob  */

.blob-wobble {
  width: 700px;
  height: 700px;
  background: var(--random_bg);
  background-position: center center;
  background-size: cover;
  border-radius: 41% 59% 31% 69% / 51% 72% 28% 49%  ;
  animation: wobble 10s ease-in-out alternate infinite;
  box-shadow: 2px 14px 28px -10px rgba(0,0,0,0.7);
  z-index: 2;
}

/* CSS to animate the blob */

@keyframes wobble {
  
    25% {
    border-radius: 41% 59% 74% 26% / 51% 31% 69% 49% ;
    transform: scale(0.9) rotate(-5deg);
  }
  
  50% {
    border-radius: 23% 77% 73% 27% / 14% 21% 79% 86%  ;
    transform: scale(0.8) rotate(6deg);
  }
  
  100% {
    border-radius: 75% 25% 75% 25% / 45% 26% 74% 55%  ;
    transform: scale(0.95) rotate(-9deg);
  }
}