SOURCE

window.onload = function(){
	var count = 200;
	var state = [];
	var max = 30;
	var cx = Math.floor(document.body.clientWidth / 2);
	var cy = Math.floor(document.body.clientHeight / 2);
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	inti();
	function inti(){
		c.width = cx * 2;
		c.height = cy * 2;
		ctx.translate(cx,cy);
		var r;
		for (var i = 0;i < count;i++){
			var color = '#';
			for (var ii = 0;ii < 6;ii++){
				r = Math.floor(Math.random() * 16);
				color += r.toString(16);
			}
			state[i] = {'color':color,'step':Math.floor(Math.random() * 120),'rac':Math.random() * 2};
		}
		window.requestAnimationFrame(dofly);
	}

	function dofly(){
		ctx.fillStyle = 'rgba(0,0,0,0.1)';
		ctx.fillRect(-cx,-cy,cx * 2,cy * 2);
		for (var i = 0;i < count;i++){
			state[i].step++;
			if (state[i].step > 120){
				state[i].step = 0;
				state[i].color = '#';
				for (var ii = 0;ii < 6;ii++){
					r = Math.floor(Math.random() * 16);
					state[i].color += r.toString(16);
				}
				state[i].rac = Math.random() * 2;
			}
			var x = Math.floor((cx + max) * state[i].step / 100 * Math.cos(state[i].rac * Math.PI));
			var y = Math.floor((cx + max) * state[i].step / 100 * Math.sin(state[i].rac * Math.PI));

			ctx.beginPath();
			ctx.ellipse(x,y,max * state[i].step / 200,max * state[i].step / 20,(state[i].rac + 0.5) * Math.PI,0,Math.PI*2);
			ctx.closePath();
			ctx.fillStyle = state[i].color;
			ctx.fill();
		}
		ctx.beginPath();
		ctx.arc(0,0,150,0,2*Math.PI);
		ctx.closePath();
		var g1 = ctx.createRadialGradient(0,0,50,0,0,150);
		g1.addColorStop(0,'#000000');
		g1.addColorStop(1,'rgba(0,0,0,0)');
		ctx.fillStyle = g1;
		ctx.fill();
    window.requestAnimationFrame(dofly);
	}
}

<canvas id="myCanvas"></canvas>

* {margin:0;padding:0;list-style:none;text-decoration:none;height:100%;}
body {background:#000;-moz-user-select:none;-webkit-user-select:none;user-select:none;}