JSFiddle - React, Tailwind, and code Playground

JavaScript

function Line(from, to, color, thickness)
{
    var from = from || { x: 0, y: 0 };
    var to = to || { x: 100, y: 100 };
    
    // Aliases for from and to
    var p1 = from;
    var p2 = to;
    
    var color = color || 'black';
    var thickness = thickness || 2;
    
    // Create hr element
    var line = document.createElement('hr');
    
    // Cache hr element for jQuery
    var $line = $(line);
    
    // Distance and angle calculations for CSS3 transforms
    var d = Math.sqrt((from.x - to.x) * (from.x - to.x) + (from.y - to.y) * (from.y - to.y));
    var angleRad = Math.atan2(p2.y - p1.y, p2.x - p1.x);
    var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;    
    
    // Apply million rules of CSS
    $line.css(
    {
        'position': 'absolute',
        'color': color,
        'background-color': color,
        'border': 'none',
        'height': thickness + 'px',
        'width': d + 'px',
        'padding': 0,
        'margin': 0,
        'border-spacing': 0,
        
        
        'left': from.x + 'px',
        'top': from.y + 'px',
        
        'transform-origin': 'left'
    });
    
    // Append the created and styled line to body
    $line.appendTo('body');
    
    $line.animate({ borderSpacing: angleDeg }, 
    {
        step: function(now, fx) 
        {
            $line.css('transform', 'rotate(' + now + 'deg)');  
        },
        duration: 5000
    }, 'linear');
}

var c = ['#c0392b', '#2980b9', '#27ae60'];

// Make lines

for(var i = 0; i < 250; i++)
{
    var rx1 = r(0, 600);
    var ry1 = r(0, 600);
    var rx2 = r(0, 600);
    var ry2 = r(0, 600);
    var rt = r(1, 3);
    var rc = c[r(0, c.length-1)];
    
    new Line({ x: rx1, y: ry1 }, { x: rx2, y: ry2 }, rc, rt);       
}

function r(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}