JSFiddle - React, Tailwind, and code Playground

by Ариан Шапиро

HTML

<body>
    <div id="layerBall" class="ball"> <a href="#"><small>100 Visit</small></a>

    </div>
    <div id="layerPulse" class="pulse"></div>
    <div class="line"></div>
    <div id="layerBall1" class="ball1"> <a href="#"><small>300 Visits</small></a> 
    </div>
    <div id="layerPulse1" class="pulse1"></div>
    <div class="line1"></div>
    <div id="layerBall2" class="ball2"> <a href="#"><small>10 Visits</small></a> 
    </div>
    <div id="layerPulse2" class="pulse2"></div>
    <div class="line2"></div>
    <div id="layerBall3" class="ball3"> <a href="#"><small>4251 Visits</small></a> 
    </div>
    <div id="layerPulse3" class="pulse3"></div>
    <div class="line3"></div>
    <div id="layerBall4" class="ball4"> <a href="#"><small>1752 Visits</small></a> 
    </div>
    <div id="layerPulse4" class="pulse4"></div>
</body>

CSS

body {
    background:transparent;
}
/* LINES STYLE with Rotate and Trasform-origin properties */
 .line, .line1, .line2, .line3 {
    background: #2187e7;
    width: 0px;
    height: 1px;
    position:absolute;
    -webkit-transform-origin: 0px;
}
.line {
    top: 270px;
    left: 10px;
    -moz-transform: rotate(-10deg);
    -moz-transform-origin: 60 -2em;
    -moz-animation: move 1s linear forwards;
    -webkit-transform: rotate(-10deg);
    -webkit-animation: move 1s linear forwards;
}
.line1 {
    top: 236px;
    left: 207px;
    -moz-transform: rotate(30deg);
    -moz-transform-origin: 0em 30em;
    -moz-animation: move1 1s 1s linear forwards;
    -webkit-transform: rotate(30deg);
    -webkit-animation: move1 1s 1s linear forwards;
}
.line2 {
    top: 335px;
    left: 380px;
    -moz-transform: rotate(-65deg);
    -moz-transform-origin: 20em -22em;
    -moz-animation: move2 1s 2s linear forwards;
    -webkit-transform: rotate(-65deg);
    -webkit-animation: move2 1s 2s linear forwards;
}
.line3 {
    top: 64px;
    left: 507px;
    -moz-transform: rotate(48deg);
    -moz-transform-origin: 30em 39em;
    -moz-animation: move3 1s 3s linear forwards;
    -webkit-transform: rotate(48deg);
    -webkit-animation: move3 1s 3s linear forwards;
}
.ball, .ball1, .ball2, .ball3, .ball4 {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: absolute;
    z-index: 99;
    -moz-transform: scale(0);
    -moz-animation: point 0.1s linear forwards;
    -webkit-transform: scale(0);
    -webkit-animation: point 0.1s linear forwards;
}
/* SPECIAL EFFECT STYLE */
 .pulse, .pulse1, .pulse2, .pulse3, .pulse4 {
    width: 12px;
    height: 12px;
    border-radius: 30px;
    border: 1px solid #00c6ff;
    box-shadow: 0 0 5px #00c6ff;
    position: absolute;
    -moz-transform:...