Rainbow Straight Lines

       
(CSS)

*{ margin:0; padding:0; overflow:active;}
#c{ background-color: #000; }

(JAVA)

script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"
  
   script id="rendered-js"
var c = document.getElementById("c");
var ctx = c.getContext("2d");

var cw = c.width = window.innerWidth;
var ch = c.height = window.innerHeight;
var xc = cw / 2,
yc = ch / 2;
var howMany = 40;
var linesRy = [];
var grd;
ctx.fillStyle = "rgba(0,0,0,.25)";

function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return { //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top) };
}

function Grd(x, y, xc, yc, hue) {
  var grd = ctx.createLinearGradient(x, y, xc, yc);
  grd.addColorStop(0, "hsla(" + hue + ",100%, 50%,0)");
  grd.addColorStop(1, "hsla(" + hue + ",100%, 50%,1)");

  return grd;
}

function Line() {
  this.x = Math.round(Math.random() * cw) + 1;
  this.y = Math.round(Math.random() * ch) + 1;

  this.xc = cw / 2;
  this.yc = ch / 2;

  this.tng = (this.x - this.xc) / (this.y - this.yc);
  this.a = Math.atan(this.tng) / (Math.PI / 180);

  this.hue = this.a < 0 ? 360 + this.a : this.a;
  this.grd = Grd(this.x, this.y, this.xc, this.yc, this.hue);
}

function createLine(i) {
  linesRy[i] = new Line();
  drawLine(i);
}

function drawLine(i) {
  ctx.lineWidth = 1;
  ctx.strokeStyle = linesRy[i].grd;
  ctx.beginPath();
  ctx.moveTo(linesRy[i].x, linesRy[i].y);
  ctx.lineTo(linesRy[i].xc, linesRy[i].yc);

  ctx.strokeStyle = linesRy[i].grd;
  ctx.stroke();
}

function updateLines(xc, yc) {
  ctx.fillRect(0, 0, cw, ch);

  for (var j = 0; j < howMany; j++) {if (window.CP.shouldStopExecution(0)) break;
    linesRy[j].xc = xc;
    linesRy[j].yc = yc;

    linesRy[j].grd = Grd(linesRy[j].x, linesRy[j].y, linesRy[j].xc, linesRy[j].yc, linesRy[j].hue);
    drawLine(j);
  }window.CP.exitedLoop(0);
}

window.addEventListener("load", function (e) {
  for (var i = 0; i < howMany; i++) {if (window.CP.shouldStopExecution(1)) break;
    createLine(i);
  }window.CP.exitedLoop(1);

  xc = 0, yc = 0;
  for (var j = 0; j < 100; j++) {if (window.CP.shouldStopExecution(2)) break;
    xc += cw / 200;
    yc += ch / 200;
    updateLines(xc, yc);

    ctx.fillRect(0, 0, cw, ch);
  }window.CP.exitedLoop(2);
}, false);

window.addEventListener("resize", function (e) {
  var c = document.getElementById("c");
  var ctx = c.getContext("2d");

  var cw = c.width = window.innerWidth;
  var ch = c.height = window.innerHeight;
  var xc = cw / 2,
  yc = ch / 2;
  var howMany = 40;
  var linesRy = [];
  var grd;
  ctx.fillStyle = "rgba(0,0,0,.25)";
  for (var i = 0; i < howMany; i++) {if (window.CP.shouldStopExecution(3)) break;
    createLine(i);
  }window.CP.exitedLoop(3);
  xc = 0, yc = 0;
  for (var j = 0; j < 100; j++) {if (window.CP.shouldStopExecution(4)) break;
    xc += cw / 200;
    yc += ch / 200;
    updateLines(xc, yc);
    ctx.fillRect(0, 0, cw, ch);
  }window.CP.exitedLoop(4);
}, false);

c.addEventListener("mousemove", function (e) {
  mousePos = oMousePos(c, e);
  xc = mousePos.x, yc = mousePos.y;

  updateLines(xc, yc);

}, false);

c.addEventListener("mouseleave", function (e) {

  mousePos = oMousePos(c, e);
  xl = mousePos.x, yl = mousePos.y;

  ctx.clearRect(0, 0, cw, ch);

  for (var j = 0; j < 50; j++) {if (window.CP.shouldStopExecution(5)) break;
    xc += (cw / 2 - xl) / 50;
    yc += (ch / 2 - yl) / 50;
    updateLines(xc, yc);
    ctx.fillRect(0, 0, cw, ch);
  }window.CP.exitedLoop(5);

}, false);

c.addEventListener("mouseenter", function (e) {

  ctx.clearRect(0, 0, cw, ch);
  xc = cw / 2, yc = ch / 2;
  for (var j = 0; j < 10; j++) {if (window.CP.shouldStopExecution(6)) break;
    xc += cw / 100;
    yc += ch / 100;
    updateLines(xc, yc);
  }window.CP.exitedLoop(6);

}, false);