spirograph.js

var self = window; 
 
(function(self) {
  	
	var canvas, context, particles = [], explode = true, FPS = 60;

	/*
 	 * Init.
	 */
	
	function init() {
		
		var body = document.querySelector('body');
		
		canvas = document.createElement('canvas');
					
        canvas.width = innerWidth;
		canvas.height = innerHeight;
		
		canvas.style.backgroundColor = '#000';
		canvas.style.position = 'absolute';
		canvas.style.top = 0;
		canvas.style.bottom = 0;
		canvas.style.left = 0;
		canvas.style.right = 0;
		
		// Filters
		
       
        body.appendChild(canvas);
		
		// Browser supports canvas?
		if(!!(capable)) {
		
			context = canvas.getContext('2d');
		
			window.onresize = onResize;
			
			createParticles();	
			
		}
		
		else {
		
			console.error('Sorry, your browser sucks :(');
		
		}
        
	}
	
	/*
	 * Checks if browser supports canvas element.
	 */
	
	function capable() {
	
		return canvas.getContext && canvas.getContext('2d');
	
	}
	
	/*
	 * On resize window event.
	 */
	
	function onResize() {
			
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	
	}
	
	function createParticles() {
		
		for(var step = 0, len = 200; step < len; step++) {
		
			var x, y, steps;
			
			steps = Math.PI * 2 * step / len;
			
			x = canvas.width * 0.5 + 200 * Math.cos(steps);
			y = canvas.height * 0.5 + 200 * Math.sin(steps);
			
			particles.push({
			
				x: x,
				y: y,
				lineX: x,
				lineY: y,
				centerX: canvas.width * 0.5,
				centerY: canvas.height * 0.5,
				originalX: x,
				originalY: y,
				scale: 1,
				radius: 3,
				minRadius: 3,
				maxRadius: 9,
				orbit: 100,
				angle: 0,
				speed: 0.05
				
			});
			
		}
		
		loop();
	
	}
	
	/*
	 * Subdivision logic.
	 */
	
	function loop() {
		
		clear();
		update();
		render();
		
		requestAnimFrame(loop);
		
	}
	
	/*
	 * Clear the whole screen.
	 */
	 
	function clear() {
		
		context.clearRect(0, 0, canvas.width, canvas.height);
		
	}
	
	/*
	 * Update the particles.
	 */
	
	function update() {
	
		var towards = {
		
			x: Math.round(canvas.width * 0.5),
			y: Math.round(canvas.height * 0.5)
		
		};
	
		[].forEach.call(particles, function(particle, index) {
		
			particle.x = particle.centerX + Math.cos(particle.angle + index) * particle.orbit;
			particle.y = particle.centerY + Math.sin(particle.angle + index) * particle.orbit;
			
			particle.scale = 1 + Math.sin(particle.angle) * 0.5;
			
			particle.angle += particle.speed;		
		
			if(!explode) {
			
				particle.centerX += (towards.x - particle.centerX) * 0.05;
				particle.centerY += (towards.y - particle.centerY) * 0.05;
				
				particle.radius += (particle.maxRadius - particle.radius) * 0.05;
				
				if(Math.round(particle.centerX) === towards.x && Math.round(particle.centerY) === towards.y) 
			
					explode = true;
			
			}
			
			if(explode) {
			
				particle.centerX += (particle.originalX - particle.centerX) * 0.05;
				particle.centerY += (particle.originalY - particle.centerY) * 0.05;
				
				particle.radius += (particle.minRadius - particle.radius) * 0.05;
			
				if(Math.round(particle.centerX) === Math.round(particle.originalX) && Math.round(particle.centerY) === Math.round(particle.originalY))
				
					explode = false;
				
			}
		
		});
		
	}
	
	/*
	 * Render the particles.
	 */
	
	function render() {

		[].forEach.call(particles, function(particle, index) {
		
			context.save();
			context.globalAlpha = 0.5;
			context.strokeStyle = '#ea80b0';
			context.lineWidth = 1;
			context.beginPath();
			context.moveTo(particle.lineX, particle.lineY);
			context.lineTo(particle.x, particle.y);
			context.stroke();
			context.restore();
			
			context.save();
			context.translate(particle.x, particle.y);
			context.scale(particle.scale, particle.scale);
			context.globalCompositeOperation = 'lighter';
			context.globalAlpha = 1;			
			context.fillStyle = '#ea80b0';
			context.beginPath();
			context.arc(0, 0, particle.radius, 0, Math.PI * 2);
			context.fill();
			context.restore();
		
		});
	
	}
	
	/*
	 * Request new frame by Paul Irish.
	 * 60 FPS.
	 */
	
	window.requestAnimFrame = (function() {
	 
		return  window.requestAnimationFrame       || 
				window.webkitRequestAnimationFrame || 
				window.mozRequestAnimationFrame    || 
				window.oRequestAnimationFrame      || 
				window.msRequestAnimationFrame     || 
			  
				function(callback) {
			  
					window.setTimeout(callback, 1000 / FPS);
				
				};
			  
    })();

	window.addEventListener ? window.addEventListener('load', init, false) : window.onload = init;
	
})(self);

Wow so pretty https://output.jsbin.com/rifoyu