console
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();
}());
<canvas></canvas>
* {margin: 0; padding: 0;}
canvas { display: block;}