* {
	margin: 0;
	padding: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #ebe9e1;
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #FFFFFF), color-stop(100%, #ebe9e1));
	background: -webkit-radial-gradient(center, ellipse cover, #FFFFFF 0%, #ebe9e1 100%);
	background: -moz-radial-gradient(center, ellipse cover, #FFFFFF 0%, #ebe9e1 100%);
	background: -ms-radial-gradient(center, ellipse cover, #FFFFFF 0%, #ebe9e1 100%);
	background: -o-radial-gradient(center, ellipse cover, #FFFFFF 0%, #ebe9e1 100%);
	background: radial-gradient(ellipse at center, #FFFFFF 0%, #ebe9e1 100%);
}
#stats {
	position: absolute;
	z-index: 10;
	left: 10px;
	top: 10px;
}
var stats,
	particles = [];

Math.range = function(min, max) {
	if (!max) {
		max = min;
		min = 0;
	}
	return min + Math.random() * (max - min);
};

Math.chance = function(probability) {
	if (!probability) {
		probability = 0.5;
	}
	return Math.random() < probability;
};

function toRGB(hex) {
	var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	return result ? {
		r: parseInt(result[1], 16),
		g: parseInt(result[2], 16),
		b: parseInt(result[3], 16)
	} : null;
}

function Particle() {
	this.isActive = (Math.chance(0.5));
}

Particle.COLORS = ['#ff0000', '#daede6', '#a3d9cc', '#738076', '#734357', '#f5496b', '#e3b1be'];

Particle.prototype.init = function() {
	this.radius = 1;
	this.color = toRGB(Particle.COLORS[Math.round(Math.random() * (Particle.COLORS.length - 1))]);
	this.alpha = 1;
	this.fade = Math.range(0.005, 0.25);
	this.grow = (this.fade > 0.01) ? Math.range(0.25, 0.5) : Math.range(0.05, 0.4);

	if (!this.isActive) {
		this.x += Math.range(-10, 10);
		this.y += Math.range(-10, 10);
	}
};

Particle.prototype.update = function() {
	if (this.isActive) {
		this.alpha -= this.fade;
		this.radius += this.grow;
	}
	if (this.alpha <= 0) {
		this.init();
	}
};

Particle.prototype.draw = function(ctx) {
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
	ctx.fillStyle = 'rgba(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ', ' + this.alpha + ')';
	ctx.fill();
};

Sketch.create({

	setup: function() {

		var particle,
			center = {
				x: this.width / 2,
				y: (this.height / 2) - 50
			};

		for (var i = 0; i < 400; i++) {
			particle = new Particle();
			particle.x = center.x + 180 * Math.pow(Math.sin(i), 3);
			particle.y = center.y + 10 * (-(15 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i)));
			particle.init();
			particles.push(particle);
		}

		// stats = new Stats();
		// this.container.appendChild(stats.domElement);
	},

	draw: function() {

		var particle;

		for (var i = 0, length = particles.length; i < length; i++) {
			particle = particles[i];
			particle.update();
			particle.draw(this);
		}

		// stats.update();
	},

	keyup: function(event) {
		var key = event.which || event.keyCode;
		if (key == 32) {
			this.toggle();
		}
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/sketch.js/1.0.0/sketch.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js