<span id="textS">GSAP</span>

<div id="container">
  <svg id='svg' class="R-T" >
      <circle cx="150" cy="150" r="105" stroke="#000" stroke-width="25" fill="none" />
      <circle cx="150" cy="150" r="130" stroke="rgba(0,0,0,0.5)" stroke-width="2" fill="none" />
      <circle cx="150" cy="150" r="85" stroke="rgba(0,0,0,0.5)" stroke-width="4" fill="none" />
  </svg>
  <div id="core">GSAP</div>
</div>

body{
  background-color: #151515; 
  background-image:linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
  background-size:50px 50px;
  overflow:hidden;
}

#textS{ 
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:'Oswald', tahoma; font-size:45vw;
  text-align:center; white-space: nowrap;
  opacity:0.4;
}

#container{ 
  width:275px; height:275px;  
  position :absolute; 
  left:50%; top:50%; transform: translate(-50%,-50%);
  border:7px solid rgba(0,0,0,0.8);
  border-radius:50%;
  box-shadow: 0px 0px 30px 0px orange , 0px 0px 150px 0px #00fc6e , inset 0px 0px 50px 0px rgba(0,0,0,0.7) ;
  background:rgba(255,255,255,0.2);
}

.R-T , .R-D{
  width:300px; height:300px;
  position:absolute;
  left:50%; top:50%; transform: translate(-50%,-50%);
  opacity:0.8;
  overflow:visible;
  z-index:1;
}

.R-T {clip:rect(0px 300px 150px 0px);   }
.R-D {clip:rect(150px 300px 300px 0px);  }

#core{
  line-height:160px;
  text-align:center; color:white;
  font-size:35px; font-family:'Oswald', tahoma; 
  position:absolute;
  left:50%; top:50%;
  width:160px; height:160px;
  background-color:#008445;
  border-radius:50%;
  transform: translate(-50%,-50%);
  z-index:1;
  box-shadow: inset 0px -10px 2px 5px rgba(0,0,0,0.3) , inset 0px 0px 50px 0px rgba(0,0,0,0.5) ;
  text-shadow: 0px 4px 0px rgba(0,0,0,0.5);
}

svg{overflow:visible}

#DiacoDesignLink,#pens{
  color: #fff;
}

/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */

var container = document.querySelector('#container') , 
    C = 2;
    // try change C to 10 , C should be even like 2,4,6 ...

for (var i=0; i<C-1; i++){
  var SVG = document.getElementById("svg");
  var nSVG = document.getElementById("svg").cloneNode(true) ;
  nSVG.setAttribute("class",i&1?'R-T':'R-D');
  if(i&1){container.insertBefore(nSVG,SVG)}else{container.appendChild(nSVG);};
};

TweenLite.set(container,{perspective:300});
TweenMax.staggerTo('.R-D,.R-T',1,{rotationX:180,repeat:-1,ease:Linear.easeNone,delay:-C/2},1/(C/2));
TweenMax.to('.R-D,.R-T',40,{rotation:360,repeat:-1,ease:Linear.easeNone});
TweenMax.to('#core',1.5,{scale:0.95,backgroundColor:'hsl(+=20,+=0%,-=10%)',repeat:-1,yoyo:true,ease:Sine.easeInOut});


/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */