JSFiddle - React, Tailwind, and code Playground

by p337

HTML

<div id="block"></div>

<button id="add">add</button>
<button id="add100">add 100</button>
<button id="add123">add 1,2,3,</button>
<button id="clear">clear</button>
<label id="count">0 lines</label>

CSS

#block{width:500px; height:500px; border:1px solid black;}

.line{position:absolute; width:1px; -webkit-transform-origin: 0% 0%; background-color:black;}

JavaScript

$('#add').click(function(){
    //generate a div with a random id
    var lineId=Math.floor(Math.random()*32768);
    $('#block').append('<div class="line" id="line' + lineId +'"></div>');
    var curLine = $('#line' + lineId);
    
    $('#count').html($('#block > div').size() + " lines");
    
    //get properties of the block
    var xmax = parseInt($('#block').css("height"), 10); //200
    var ymax = parseInt($('#block').css("width"), 10); //200
    
    //(xcen, ycen) is the origin of the points
    var xcen = xmax / 2;
    var ycen = ymax / 2; 
    curLine.css("left", (xcen) + "px"); //9 is horizontal offset
    curLine.css("top", (ycen ) + "px"); //8 is vertical offset
    
    var endpoint = getRandomInt(0, ycen);
    var a = ycen - endpoint;
    var b = ymax/2;
    var c = Math.sqrt((a*a) + (b*b));
    var color = '#'+Math.floor(Math.random()*16777215).toString(16);
        var angle = Math.asin(a/c) *(180/Math.PI);
    
    var rotations = [90, 180, 270, 360];
    var rotate = rotations[Math.floor(Math.random()*rotations.length)];
    
    if(Math.random() < 0.5)
    {
        curLine.css("left", (xcen + 8) + "px"); //9 is horizontal offset
        curLine.css("top", (ycen + 8) + "px"); //8 is vertical offset
        angle = angle - rotate;
    }
    else
    {
        curLine.css("left", (xcen + 9) + "px"); //9 is horizontal offset
        curLine.css("top", (ycen + 9) + "px"); //8 is vertical offset
        angle = rotate - angle; 
    }
    curLine.css('-webkit-transform' , 'rotate(' + angle + 'deg)');    

    curLine.css('height', getRandomInt(0,ymax) + 'px');

    //curLine.css("height", c);
    curLine.animate({height: c + "px"}, 750);
  
    /*curLine.animate({  textIndent: angle }, {
    step: function(now,fx) {
      curLine.css('-webkit-transform','rotate('+now+'deg)'); 
    },
        duration:900
},'linear');*/
    curLine.css("background-color",color);
  
});

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max -...