JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<canvas style="background: white" id="cv" width="800" height="600" style="margin-top:200px"></canvas>

CSS

body { background: linear-gradient(180deg, #333, black); }

JavaScript

var framesPerLoop = 20;
var vanishingPointY = -5000;
var verticalLinesPerHalf = 10;
var horizontalLines = 40;
var offsetY = document.getElementById("cv").height/2;

var frame = 0;
function draw() {
  var cv = document.getElementById("cv");
  var ctx = cv.getContext("2d");
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, cv.width, cv.height);
  ctx.save();
  ctx.translate(cv.width/2+0.5, offsetY+0.5);
  ctx.beginPath();
  ctx.strokeStyle = "#E357DF";
  ctx.lineWidth = 2;
  ctx.shadowBlur = 10;
  ctx.shadowColor = "#E357DF";
  
  var entranceLineGap = cv.width / (verticalLinesPerHalf*2);
  var exitLineGap = entranceLineGap / cv.height * (cv.height-vanishingPointY) / 2;
  for (var i = -verticalLinesPerHalf; i <= verticalLinesPerHalf; i++) {
    ctx.moveTo(i * entranceLineGap, 0);
    ctx.lineTo(i * exitLineGap, cv.height-offsetY);
  }
  
  for (var i = horizontalLines/2; i < horizontalLines; i++) {
    var portion = Math.pow((i+frame/framesPerLoop) / horizontalLines, 16);
    var y = portion * cv.height;
    ctx.moveTo(-cv.width/2, y);
    ctx.lineTo(cv.width/2, y);
  }
  ctx.stroke();
  ctx.restore();
  frame++;
  if (frame >= framesPerLoop) { frame = 0; }

  requestAnimationFrame(draw);
}
draw();