<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();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.