EffectHub.com: your best source for gaming

Recommendation

More Effects...

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

var c;
var $;
var msX = 250, msY = 250;
var w;
var h;
var t;
var n = [];
var m = Math.random;
var f = Math.floor;

function A(){
    document.getElementById("canv");
    c = document.getElementById("canv");
    $ = c.getContext("2d");
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
    B();
}

function B(){
    $.globalCompositeOperation = "source-over";
    $.fillStyle = "hsla(332, 95%, 5%, 1)";
    $.fillRect(0, 0, w, h);
    $.globalCompositeOperation = "lighter";

for(var i = 0; i < 25; i++){
        var p = {};
        p.x = msX;
        p.y = msY;
        p.vx = m()*20-5;
        p.vy = m()*20-7;
        p.s = m()*60+5;
        p.r = f(m()*130+10);
        p.g = f(0.5*m()*50);
        p.b = f(0.5*m()*255);
        p.dx = msX;
        n.push(p);
    }

i = n.length;
    while(i--){
        p = n[i];
        p.x += p.vx;
        p.y += p.vy;
        p.vy -= 0.2;
        p.vx += (p.dx-p.x)/p.s/2;
        p.s -= 1.5;

if(p.s < 1){
            n.splice(i,1);
            continue;
        }

$.beginPath();
        var g1 = "rgba(" + p.r + "," + p.g + "," + p.b + ","+(p.s/5)+")";
        var g2 = "rgba(" + p.r + "," + p.g + "," + p.b + ",0)";
        var g = $.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.s);
        g.addColorStop(0,g1);
        g.addColorStop(1,g2);
        $.fillStyle = g;
        $.arc(p.x, p.y, p.s, 0, Math.PI*2, false);
        $.fill();
    }
  
    window.requestAnimFrame(B);
  
    t = "EffectHub".split("").join(String.fromCharCode(0x2004));
    $.font = "4.5em Poiret One";
    $.fillStyle = 'hsla(332, 95%, 15%, 1)';
    $.fillText(t, c.width / 2 - 300, c.height / 2);
}

A();

CSS

HTML

Recommendation

Join Effecthub.com