New Document             html, body {   height: 100%;   padding: 0;   margin: 0;   background: #000; } canvas {   position: absolute;   width: 100%;   height: 100%; }    

        /*  * Settings  */ var settings = {   particles: {     length:   500, // maximum amount of particles     duration:   2, // particle duration in sec     velocity: 100, // particle velocity in pixels/sec     effect: -0.75, // play with this for a nice effect     size:      30, // particle size in pixels   }, };

/*  * RequestAnimationFrame polyfill by Erik Möller  */ (function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a= duration && firstActive != firstFree) {       firstActive++;       if (firstActive == particles.length) firstActive = 0;     }             };   ParticlePool.prototype.draw = function(context, image) {     // draw active particles     if (firstActive < firstFree) {       for (i = firstActive; i < firstFree; i++)         particles[i].draw(context, image);     }     if (firstFree < firstActive) {       for (i = firstActive; i < particles.length; i++)         particles[i].draw(context, image);       for (i = 0; i < firstFree; i++)         particles[i].draw(context, image);     }   };   return ParticlePool; })();

/*  * Putting it all together  */ (function(canvas) {   var context = canvas.getContext('2d'),       particles = new ParticlePool(settings.particles.length),       particleRate = settings.particles.length / settings.particles.duration, // particles/sec       time;      // get point on heart with -PI