JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<div class="cont">

</div>

CSS

html, body, .cont {
    height: 100%;
}
body {
    font-family: helvetica;
    margin: 0; padding: 0;
}

.cont {
    position: relative;
    overflow: hidden;
}

.circle {
    z-index: 3;
    height: 40px;
    line-height: 40px;
    width: 40px;
    text-align: center;
    color: #fff;
    background-color: #2aE;
    border-radius: 150px;
    position: absolute;
}

.line {
    height: 3px;
    background-color: #aaa;
    transform-origin: left center;
    position: absolute;
    z-index: 1;
}

JavaScript

var circles = $('<div class="circle">'),
    cont = $('.cont'),
    n = 15;

//generate circles
while (n--) cont.append(circles.clone().text(n+1));
circles = $('.circle');

//position circles randomly
var w = $('.cont').width(),
    h = $('.cont').height();
console.log(w,h);
circles.each(function(){
    $(this).css('top',h*Math.random()+'px');
    $(this).css('left',w*Math.random()+'px');
});


//generate lines
circles.each(function(i){
    var pos0 = $(this).position(),
        pos1 = (circles.eq(i+1)||{}).position();

    if (pos1==undefined) return;
    var x0 = pos0.left,
        y0 = pos0.top,
        x1 = pos1.left,
        y1 = pos1.top;
    line(x0, y0, x1, y1);
});


function line(x, y, x1, y1) {
    var l = $("<div class='line'>");
    //soh cah TOA and pythargoream theorem
    var w = circles.width()/2;
    l.css({
        top: y+w,
        left: x+w,
        width: Math.sqrt((x1-x)*(x1-x) + (y1 - y)*(y1 - y)),
        transform: 'rotate('+Math.atan2((y1-y),(x1-x))+'rad)'
    });
    cont.append(l);
}