<canvas id="canvas"></canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="liquid">
        <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 40 -10"/>
      </filter>
    </defs>
</svg>

*
  margin: 0
  padding: 0

body
  background-color: rgba(0, 0 , 30, 1)
  overflow: hidden
  
canvas
  filter: url(#liquid)
  
svg
  position: absolute
  height: 1px

let c = document.getElementById("canvas"),
    ctx = c.getContext("2d"),
    w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    particles = [];

class Particle {
  constructor() {
    this.pos = {};
    this.pos.x = w/2;
    this.pos.y = h/2;
    this.vel = {};
    this.vel.x = Math.random() * 6 - 3;
    this.vel.y = Math.random() * 6 - 3;
    this.radius = Math.random() * 16;
    this.life = 0;
  }
  
  draw() {
    ctx.fillStyle = '#4A7DB9';
    ctx.beginPath();
    ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
  }
  
  move() {
    this.pos.x += this.vel.x;
    this.pos.y += this.vel.y;
  }
  
  disappear() {
    this.life++;
  }
}

function animate() {
  ctx.clearRect(0, 0, w, h);
  particles.forEach((e, index) => {
    e.draw();
    e.move();
    e.disappear();
    
    if(e.life % 350 === 0) {
      particles.splice(index, 1);
    }
    
  });
  
  for( let i = 0; i < 2; i++) {
    particles.push( new Particle() );
  }
}

function render() {
  animate();
  window.requestAnimationFrame(render);
}

render();