JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<canvas id=c></canvas>

CSS

canvas {
  
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext( '2d' ),
    
    opts = {
      rectSize: 1,
      height: window.innerHeight,      
      hueSpeed: 1,
      repaintAlpha: .02,      
      lightsParXxY: .05,
      brightColor: 'hsla(hue,100%,60%, 1)',
      dullColor: 'hsla(hue,80%, 40%, 1)',
	  colorPerViewport: 120
    },
    
    tick = 0;



function loop() {
  
 // window.requestAnimationFrame( loop );

  tick += opts.hueSpeed;

  var noColsPerColor = (w/opts.colorPerViewport); // 1920/120 = 16


  for(var i = 0; i < w; i++) {
  console.log("parseInt(i/noColsPerColor)",parseInt(i/noColsPerColor),noColsPerColor)
			if (parseInt(i/noColsPerColor) == i) {
      	ctx.fillStyle = opts.brightColor.replace( 'hue', (i/noColsPerColor) + tick);
      } else {
      	ctx.fillStyle = opts.dullColor.replace( 'hue', (i/noColsPerColor) + tick);
      }
		 
	
     ctx.fillRect( i * opts.rectSize,0,opts.rectSize,window.innerHeight);

  }
  /*ctx.globalAlpha=0.1;
  ctx.fillStyle = 'rgba(107,79,79)';
  ctx.fillRect( 0, 0, w, h );/
  /*var endX = ( w / opts.rectSize + 1 ) |0,
      endY = ( h / opts.height + 1 ) |0,
      sum = w + h,
      num = endX*endY * opts.lightsParXxY;
  for( var i = 0; i < num; ++i ) {
    
    var x = ( ( Math.random() * endX ) | 0 ) * opts.rectSize,
        y = ( ( Math.random() * endY ) | 0 ) * opts.height;
     ctx.fillStyle = 'hsl(hue,100%,60%)'.replace( 'hue', ( x + y ) / sum * 360 + tick );
     ctx.fillRect( x,y,50,window.innerHeight); 
  }*/
  
}
loop();

window.addEventListener( 'resize', function(){
  
  w = c.width = window.innerWidth;
  h = c.height = window.innerHeight;
  ctx.fillStyle = '#111';
  ctx.fillRect( 0, 0, w, h );
  ctx.font = opts.font;
})