EffectHub.com: your best source for gaming

Recommendation

More Effects...

class App {
  constructor() {
    this.canvas = document.createElement('canvas');
    document.body.appendChild(this.canvas);
    this.canvas.width = this.canvas.height = 512;
    Object.assign(this.canvas.style, {
    position:"absolute",
    left:"50%",
    marginLeft:"-256px",
    borderRadius:"10px",
    boxShadow:"10px 10px 30px rgba(0,0,0,0.1)"
  });
    requestAnimationFrame(()=>this.update());
  }
  update() {
    let g = this.canvas.getContext('2d');
    for(let y = 0; y< this.canvas.height; y+=30){
      const grad = g.createLinearGradient(0,y+50, 0, y-70);
      grad.addColorStop(0,"gray");
      grad.addColorStop(1,"white");
      g.fillStyle = grad;
      g.beginPath();
      for(let x = 0;x<=this.canvas.width; x+=16){
       let middleOffset = (x/this.canvas.width);
        middleOffset *=1-middleOffset;
        middleOffset = Math.pow(4*middleOffset,2);
        let yOffset =(y/this.canvas.height);
        yOffset *=1-yOffset;
        yOffset = Math.pow(4*yOffset,2);
       g.lineTo(x, y-70*middleOffset*yOffset*(1.3+0.2*Math.sin(Date.now()/100+x/30+y/13)));
    }
      g.lineTo(this.canvas.width+100,y+60);
      g.lineTo(-100,y+60);
     g.fill();
    }
    requestAnimationFrame(()=>this.update());
  }
}
const a = new App();

CSS

HTML

Recommendation

Join Effecthub.com