EffectHub.com: your best source for gaming

Recommendation

More Effects...

var c = document.getElementById('canv'),
  $ = c.getContext('2d'),
  num = 20;
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;

var draw = function(circs) {
  var dx = w * 0.21,
    dy = h * 0.21,
    i, x, r, g, b,
    circ, col, grd;

$.globalCompositeOperation = 'lighter';
  for (i in circs) {
    circ = circs[i];
    r = (Math.ceil(Math.random() + 3 * 255));
    g = (Math.ceil(Math.random() + 2 * 30));
    b = (Math.ceil(Math.random() + 1 * 120));

col = r + ',' + g + ',' + b;
    grd = $.createRadialGradient(
      circ.x, circ.y, 0, circ.x, circ.y, circ.rad);

grd.addColorStop(0, 'rgba(' + col + ', 0.94)');
    grd.addColorStop(0.4, 'rgba(' + col + ', 0.94)');
    grd.addColorStop(0.65, 'rgba(' + col + ', 0.25)');
    grd.addColorStop(0.8, 'rgba(' + col + ', 0.1)');
    grd.addColorStop(1, 'rgba(' + col + ', 0)');

$.fillStyle = grd;
    $.beginPath();
    $.arc(circ.x, circ.y, circ.rad, 0, Math.PI * 2, false);
    $.fill();

circ.x = (circ.x + circ.vx + w + 3 * dx) % (w + 2 * dx) - dx;
    circ.y = (circ.y + circ.vy + h + 3 * dy) % (h + 2 * dy) - dy;
  }
}
var clear = function() {
  $.globalCompositeOperation = 'source-over';
  $.fillStyle = 'hsla(350, 95%, 5%, 1)';
  $.fillRect(0, 0, c.width, c.height);
}

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

var run = function() {
  run.circs || (run.circs = set(num));
  clear();
  draw(run.circs);
  window.requestAnimFrame(run);
}
run();

window.addEventListener('resize', function() {
  c.width = window.innerWidth;
  c.height = window.innerHeight;
}, false);

CSS

HTML

Recommendation

Join Effecthub.com