JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<script src="http://fonts.googleapis.com/css?family=Montserrat"></script>
<div class="animation">
    <div class="loader"></div>
    <div class="overlap"> <h1>Hello</h1></div>
    
</div>
<div class="__animtate _pattern">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 6011.4 200" enable-background="new 0 0 6011.4 200" xml:space="preserve">
<rect display="none" fill="#DDDDDD" width="200" height="200"/>
<path fill="none" stroke="#286BBC" stroke-width="0.9279" stroke-miterlimit="10" d="M83.8,194.6l-57-32.1
	c-10.5-5.9-17-16.9-17-28.9L9.5,68.2c-0.1-11.9,6.2-22.9,16.5-29L82.9,5.8c10.3-6,23-6.2,33.3-0.3l57,32.1c10.5,5.9,17,16.9,17,28.9
	l0.4,65.4c0.1,11.9-6.2,22.9-16.5,29l-56.9,33.5C106.9,200.3,94.2,200.4,83.8,194.6z"/>
<path fill="none" stroke="#286BBC" stroke-width="0.9279" stroke-miterlimit="10" d="M283.8,194.6l-57-32.1
	c-10.5-5.9-17-16.9-17-28.9l-0.4-65.4c-0.1-11.9,6.2-22.9,16.5-29l56.9-33.5c10.3-6,23-6.2,33.3-0.3l57,32.1
	c10.5,5.9,17,16.9,17,28.9l0.4,65.4c0.1,11.9-6.2,22.9-16.5,29l-56.9,33.5C306.9,200.3,294.2,200.4,283.8,194.6z"/>
<path fill="none" stroke="#286BBC" stroke-width="0.9279" stroke-miterlimit="10" d="M487.1,195.1l-58-30.1
	c-10.7-5.5-17.5-16.3-18-28.3l-2.6-65.3c-0.5-11.9,5.4-23.1,15.4-29.5l55.7-35.4c10-6.4,22.7-7,33.3-1.5l58,30.1
	c10.7,5.5,17.5,16.3,18,28.3l2.6,65.3c0.5,11.9-5.4,23.1-15.4,29.5l-55.7,35.4C510.4,200,497.7,200.5,487.1,195.1z"/>
<path fill="none" stroke="#286BBC" stroke-width="0.9279" stroke-miterlimit="10" d="M690.5,195.5l-59.1-28
	c-10.8-5.1-18.1-15.7-19-27.7l-4.9-65.2c-0.9-11.9,4.6-23.3,14.4-30.1l54.4-37.4c9.8-6.7,22.5-7.7,33.2-2.6l59.1,28
	c10.8,5.1,18.1,15.7,19,27.7l4.9,65.2c0.9,11.9-4.6,23.3-14.4,30.1l-54.4,37.4C713.9,199.6,701.2,200.6,690.5,195.5z"/>
<path fill="none" stroke="#286BBC" stroke-width="0.9279" stroke-miterlimit="10"...

CSS

body{
    height: 100vh;
    background: #05090C;
}
svg{
    width: 6011px;
    opacity: 0.3;
}

div, .loader, .loader::after, .overlap, h1{
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom: 0;
    margin: auto;
}

div svg{
    margin-left:0;
}


._pattern{
    display: none;
}

#circle{
    width: 200px;
}

.loader, .loader::after{
    opacity: 1;
    width: 163px;
    height: 163px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 10px rgba(40,107,188,0.01),
                inset 0 0 25px 10px rgba(40,107,188,0.05);
    border: solid 1px rgba(40,107,188,0.3);
}

.loader::after{
    content: '';
    width: 140px;
    height: 140px;
    box-shadow: none;
    z-index: 999;
}

.overlap{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(5,9,12,0)), color-stop(50%,rgba(5,9,12,0.75)), color-stop(100%,rgba(5,9,12,0)));
    z-index: 99;
}

h1{
    width: 100px;
    height: 40px;
    color: rgb(40,107,188);
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-weight: 300;
}

h1::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 100px;
    -webkit-transition: 0.2s ease-out;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgba(5,9,12,0.5)), color-stop(100%,rgba(5,9,12,0)));
}

h1:hover::after{
    top: -10px;
}

JavaScript

var a = document.querySelector('#a svg');
var b = document.querySelector('#b svg');
var c = document.querySelector('#c svg');
var d = document.querySelector('#d svg');

console.log(document.querySelectorAll('path').length)

Element.prototype.animateKey = function(seconds, cp ){
    var timer;
    var step = 200;
    var max = 5811;
    var min = 0;
    var currentPosition = cp || 0;
    var elem = this;
    function Move(){
        currentPosition = currentPosition+step >= max ? min : currentPosition+step;
        elem.style.marginLeft = -currentPosition + 'px';
    }
    

    timer = setInterval(Move, seconds*1000);
    
    document.body.onclick = function(){
        clearInterval(timer);
    }

}

//a.animateKey(0.01);

function createCirlceAnimation(q){
    var parent = document.querySelector('.animation'),
        pattern = document.querySelector('._pattern').innerHTML;
    
    for(var i=0; i < q; i++){
        var div = document.createElement('div'),
            ring;
        
        div.className = '__animtate';
        div.innerHTML = pattern;
        parent.appendChild(div);
        ring = div.children[0];
        //ring.style.opacity = Math.random()*0.8;
        var x = Math.random()*0.05;
        ring.animateKey(x, q*200);
//        console.log(x);
    }
    
}

createCirlceAnimation(13)