Particle System.

HTML

<div id="wrap">
    <canvas id="canvas"></canvas>
</div>

CSS

div#wrap{
    margin:50px 0px; padding:0px;
    text-align:center;
}

canvas{
    width: 500px;
    position:absolute;
   

}

JavaScript

var NumParticles = 80;
var SizeMultiplier = 3;

var canvas = $('#canvas')[0];
var W = 500; H = 500;
canvas.width = W; canvas.height = H;

var ctx = canvas.getContext("2d");

var particles = [];
for (i =0 ; i<NumParticles; i++){
    particles.push(new Particle());
}

setInterval(draw,23);

function Particle(){   
    //Position of particle random
    this.x = Math.random()*W;
    this.y = Math.random()*H;
    
    //Lets add random velocity to each particle
    this.vx = Math.random()*20-10;
    this.vy = Math.random()*20-10;
    
    //Random colors
    var r = 100+Math.random()*155>>0;
    var g = 100+Math.random()*155>>0;
    var b = 100+Math.random()*155>>0;
    this.color = "rgba("+r+", "+g+", "+b+", 0.5)";
    this.size = 10*SizeMultiplier;
}




function draw(){
    ctx.globalCompositeOperation = "source-over";
    ctx.setFillColor('rgba(0,0,0,0.4)');
    ctx.fillRect(0,0,W,H);
    ctx.globalCompositeOperation = "lighter";
    for (i in particles){
        
        x = particles[i];      
        drawCircle(ctx,x);    
        var newX = x.x + x.vx;
        var newY = x.y + x.vy;
        x.x = newX > W+20 ? -20 : newX;
        x.x = newX < -20  ? W+20: newX;
        x.y = newY > H+20 ? -20 : newY;
        x.y = newY < -20  ? H+20: newY;
    }
    
    
}

function drawCircle(con,p){
    var x = p.x; var y = p.y;
    var r = p.size;
    var color = p.color;
            var gradient = con.createRadialGradient(x,y,0,x,y,r);
        gradient.addColorStop(0, "white");
        gradient.addColorStop(0.4, "white");
        gradient.addColorStop(0.4, color);
        gradient.addColorStop(1, "black");
    con.fillStyle = gradient;
    con.beginPath();
    con.arc(x,y,r,0,Math.PI*2,false);
    con.fill();
    
}