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 innerRadius = 5;
var outerRadius = 500;


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


//drawLines();


fillLines();
randomizeLinePositions();

window.setInterval(drawLines, updateInterval);



function drawLines()
{
  ctx.clearRect(0, 0, c.width, c.height);
  
  
  fillLines();
  
  lines.forEach(function(line) 
  {
    ctx.beginPath();
    ctx.strokeStyle='white';
    var begin = 
    {
      x: center.x + Math.sin(line.radius) * line.position,
      y: center.y + Math.cos(line.radius) * line.position
    };
  
  	var lengthScaleFactor =  scaleDistance(line.position, outerRadius, 3);
    
    var end = 
    {
      x: center.x + Math.sin(line.radius) * (line.position + line.length * lengthScaleFactor),
      y: center.y + Math.cos(line.radius) * (line.position + line.length * lengthScaleFactor)
    };
    ctx.moveTo(begin.x,begin.y);
    ctx.lineTo(end.x,end.y);
    ctx.stroke();
    
    line.position += lineSpeed * 100 * scaleDistance(line.position, outerRadius, 2) * (updateInterval / 1000);
    
    if(line.position >= outerRadius)
    {
      lines.splice(lines.indexOf(line), 1);
      delete line;
    }
  });
} 

function fillLines()
{
	while(lines.length < numOfLinesPresent)
  {
    lines.push({
      radius: Math.random() * 360,
      length: (0.5 + Math.random() / 2) * (lineLength / 100) * ((outerRadius - innerRadius)),
      position: innerRadius + Math.random() * innerRadius
    });
  }
}

function randomizeLinePositions()
{
	lines.forEach(function(line)
  {
  	line.position = innerRadius + Math.random() * (outerRadius - innerRadius);
  });
}

function scaleDistance(position, maxPosition, scaleFactor)
{
	return Math.pow(position/maxPosition *...