* {
  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