<div class="lava-loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <svg class="gooey-filter" version="1.1">
    <defs>
      <filter id="gooey">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="gooey" />
        <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
      </filter>
    </defs>
  </svg>
</div>

body {
  background: url(https://i.postimg.cc/5t9gjY70/Avatar2.jpg) no-repeat;
  background-position: 0 0;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}

.lava-loader {
  -webkit-filter: url(#gooey);
  filter: url(#gooey);
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot {
  background: url(https://i.postimg.cc/d0WBCsp9/Avatar1.jpg) no-repeat;
  background-position: 0 0;
  background-size: cover;
  background-attachment: fixed;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  position: absolute;
  will-change: transform;
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

function setDotMovement() {
    const dots = document.querySelectorAll('.dot');
    const index = Math.round(Math.random() * (dots.length - 1));

    var a = getRandomInt(-50, 50);
    var b = getRandomInt(-50, 50);
    var c = Math.random() * 3;
    var d = 100 * c;

    dots[index].style.transform = `
     translate(${a}vw, ${b}vh)
  `;
    dots[index].style.width = d + 'px';
    dots[index].style.height = d + 'px';
    dots[index].style.backgroundPosition = (-a) + 'vw ' + (-b) + 'vh';
    dots[index].style.backgroundSize = 'auto' + d + '%';
    dots[index].style.transition = getRandomInt(12000, 18000) + 'ms ease-in-out';
    setTimeout(setDotMovement, getRandomInt(500, 1000));
}
setTimeout(setDotMovement, 1200);