function Particle(x, y) {
this.angle = Math.random() * Math.PI * 2;
Particle.prototype.draw = function (ctx) {
ctx.translate(this.x, this.y);
ctx.globalAlpha = this.alpha;
ctx.strokeStyle = 'rgba(255, 255, 255, .4)';
ctx.fillStyle = this.color;
ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true);
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
W = canvas.width = window.innerWidth,
H = canvas.height = window.innerHeight,
mainParticle = new Particle(W / 2 - 300, H / 2 -100),
mainParticle.color = 'rgba(0, 0, 0, 0)';
function drawParticle(particle) {
particle.vx = Math.sin(particle.angle) * particle.speed;
particle.vy = Math.cos(particle.angle) * particle.speed;
particle.x += particle.vx;
particle.y += particle.vy;
if (particle.radius > .02) {
if (particle.alpha > .01) {
function animateMainParticle() {
var particle = new Particle(mainParticle.x, mainParticle.y);
particle.color = 'rgba(52, 152,' + (150 + Math.round(Math.random() * 105 )) + ', 1)';
particles.push(particle);
var dx = targetX - mainParticle.x,
dy = targetY - mainParticle.y;
mainParticle.speed = .01;
mainParticle.vx += dx * mainParticle.speed;
mainParticle.vy += dy * mainParticle.speed;
mainParticle.x += mainParticle.vx;
mainParticle.y += mainParticle.vy;
window.requestAnimationFrame(drawFrame, canvas);
ctx.fillStyle = 'rgba(23, 41, 58, .55)';
ctx.fillRect(0, 0, W, H);
particles.forEach(drawParticle);