function Particle(x, y) { this.x = x; this.y = y; this.radius = 5; this.color = 'blue)'; this.alpha = 1; this.angle = Math.random() * Math.PI * 2; this.speed = 1.2; this.vx = 0; this.vy = 0; } Particle.prototype.draw = function (ctx) { ctx.save(); ctx.translate(this.x, this.y); ctx.globalAlpha = this.alpha; ctx.strokeStyle = 'rgba(255, 255, 255, .4)'; ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.restore(); }; var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'), W = canvas.width = window.innerWidth, H = canvas.height = window.innerHeight, particles = [], mainParticle = new Particle(W / 2 - 300, H / 2 -100), targetX = W / 2, targetY = H / 2; mainParticle.vx = 7; mainParticle.vy = 7; mainParticle.color = 'rgba(0, 0, 0, 0)'; function drawParticle(particle) { particle.draw(ctx); setTimeout(function() { 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) { particle.radius -= .02; } if (particle.alpha > .01) { particle.alpha -= .01; } }, 700); } function animateMainParticle() { var particle = new Particle(mainParticle.x, mainParticle.y); particle.color = 'rgba(52, 152,' + (150 + Math.round(Math.random() * 105 )) + ', 1)'; particle.radius = 4; particle.alpha = 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; mainParticle.draw(ctx); } (function drawFrame(){ window.requestAnimationFrame(drawFrame, canvas); ctx.fillStyle = 'rgba(23, 41, 58, .55)'; ctx.fillRect(0, 0, W, H); particles.forEach(drawParticle); animateMainParticle(); }());