EffectHub.com: your best source for gaming

Recommendation

More Effects...

var canvas = document.querySelector( 'canvas' );
var context = canvas.getContext( '2d' );

var width, height;
var rings = [];
var ringsTotal = 10;

while( rings.length < ringsTotal ) {
  rings.push({
    energy: rings.length / ringsTotal,
    radius: 200,
    color: 'hsl('+ Math.round( Math.random() * 360 ) +', 70%, 50%)'
  });
}

layout();
paint();

window.addEventListener( 'resize', layout );

function paint() {
  
  context.clearRect( 0, 0, width, height );
   context.globalCompositeOperati
  
  rings.forEach( function( ring ) {
    
    ring.energy += 0.005;
    
    context.beginPath();
    context.arc( width / 2, height / 2, ring.radius * ring.energy, 0, Math.PI * 2 );
    context.globalAlpha = Math.max( 1 - ring.energy, 0 );
     context.fill
    context.fill();
    
    if( ring.energy > 1 ) ring.energy = 0;
    
  } );
  
  requestAnimationFrame( paint );
  
}

function layout() {
  width = window.innerWidth;
  height = window.innerHeight;

canvas.width = width;
  canvas.height = height;
}

CSS

HTML

Recommendation

Join Effecthub.com