JSFiddle - React, Tailwind, and code Playground

by Aides

HTML

<canvas id="myCanvas"></canvas>
<div id="result"></div>

CSS

#result{
 
   margin-top: 20px;
 
}

#myCanvas{
  
    background-color: black;
}

JavaScript

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

c.width = $(document).width();
c.height = $(document).height();

var output = document.getElementById("result");

var lines = [];
var numOfLinesPresent = 50;

var lineSpeed = 100;
var updateInterval = 40;
var lineLength = 80;
var arcWidth = deg2rad(.1);  //in rad

var innerRadius = 5;
var outerRadius = 500;


var center = 
{
	x: c.width / 2,
  y: c.height / 2
}



initiate();

function initiate()
{
	fillLines();
	randomizeLinePositions();

	window.setInterval(drawLines, updateInterval);
}



function drawLines()
{

  ctx.clearRect(0, 0, c.width, c.height);
  /*ctx.beginPath();
  ctx.fillStyle = "rgba(0,0,0,0.5)";
  ctx.fillRect(0,0,c.width, c.height);
  */
  
  fillLines();
  
  lines.forEach(function(line) 
  {
    ctx.beginPath();
    ctx.strokeStyle='white';
    ctx.fillStyle='white';
    
    var innerLineRadius = line.position;
    var outerLineRadius = line.position + line.length * scaleDistance(line.position, outerRadius, 3);
    
    
    ctx.moveTo(
    	center.x + Math.cos(line.radius - arcWidth) * innerLineRadius,
      center.y + Math.sin(line.radius - arcWidth) * innerLineRadius
    );
    ctx.lineTo(
    	center.x + Math.cos(line.radius - arcWidth) * outerLineRadius,
      center.y + Math.sin(line.radius - arcWidth) * outerLineRadius
    );
    ctx.arc(
    	center.x, 
      center.y, 
      outerLineRadius,
      line.radius - arcWidth, 
      line.radius + arcWidth
    );
    ctx.lineTo(
    	center.x + Math.cos(line.radius + arcWidth) * innerLineRadius,
      center.y + Math.sin(line.radius + arcWidth) * innerLineRadius
    );
    ctx.arc(
    	center.x, 
      center.y, 
      innerLineRadius,
      line.radius + arcWidth, 
      line.radius - arcWidth,
      true
    );
    ctx.fill();
    
    
    line.position += lineSpeed * 100 * scaleDistance(line.position, outerRadius, 2) * (updateInterval / 1000);
    
    if(line.position >= outerRadius)
    {
     ...