<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>
body{
  background: #000;
}
canvas{
    filter: url(#liquid)
}
svg{
  position: absolute;
  height: 1px;
}
let dots = [];

    class Particle{
      constructor(x,y){
        this.pos = {};
        this.pos.x = x;
        this.pos.y = y;
        this.radius = 30 + Math.random()*10;
        this.vel = {};
        this.vel.x = Math.random()*2 - 1;
        this.vel.y = Math.random()*2 - 1;

        this.life = 0;
      }

      move(){
        this.life++;

        if(this.radius>3) this.radius *=0.99;
        this.vel.x *= 0.99;
        this.vel.y *= 0.99;

        this.pos.x += this.vel.x;
        this.pos.y += this.vel.y;

        if( this.life % 16 === 0){
           //let newP = new Particle(this.pos.x,this.pos.y);
          //dots.push(newP);
        }

      }

      draw(ctx){
        ctx.fillStyle = '#ffffff';
        ctx.beginPath();
        ctx.arc(this.pos.x,this.pos.y,this.radius,0,2*Math.PI);
        ctx.closePath();
        ctx.fill();
      }
    }
    

    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    let width = window.innerWidth;
    let height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;



    document.body.appendChild(canvas);


    

    for (var i = 0; i < 50; i++) {
      dots.push(
        new Particle(Math.random()*width,Math.random()*height)
      )
    }

    canvas.onmousemove = function(e){
      dots.push(
        new Particle(
          e.layerX,
          e.layerY
        )
      )
    }


    


    function draw(){
      ctx.clearRect(0,0,width,height);
      dots.forEach((e,index)=>{
        e.move();
        e.draw(ctx);

        if(e.vel.x<0.1){
          dots.splice(index,1);
        }
      })
    }


    function Render(){
      draw();
      window.requestAnimationFrame(Render);
    }

    Render();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.