<svg class="loader" viewBox="0 0 100 100">
  
<g class="points"> 
  <circle class="ciw" cx="50" cy="50" r="50" fill="#fff"  />
<circle class="ci2" cx="5" cy="50" r="4" />
<circle class="ci1" cx="95" cy="50" r="4" />
  </g>
</svg>
<div class="dwf">
  <a class="btn" href="https://codepen.io/uchardon/">done with fun - @uchardon</a> &copy;2018 </div>
<div class="share">
  <a target="_blank" href="https://twitter.com/intent/tweet?text=Atom%20SVG%20stroke%20animation%20with%20no%20JS&url=https://codepen.io/uchardon/pen/NORoXJ&via=CodePen">
<svg class="twitter" viewBox="0 0 612 612" >
  <path class="ani" d="M 612 116 c -23 10 -47 17 -72 20 26 -15 46 -40 55 -69 -24 14 -51 24 -80 30 a 125 125 0 0 0 -217 86 c 0 10 1 19 3 29 -104 -6 -196 -56 -258 -132 a 125 125 0 0 0 39 168 c -21 -1 -40 -6 -57 -16 v 2 c0 61 43 111 100 123 a127 127 0 0 1 -56 2 c 16 50 62 86 117 87 A 252 252 0 0 1 0 498 a 355 355 0 0 0 550 -301 l -1 -16 c 25 -17 46 -40 63 -65 z"  />
  <path d="M 612 116 c -23 10 -47 17 -72 20 26 -15 46 -40 55 -69 -24 14 -51 24 -80 30 a 125 125 0 0 0 -217 86 c 0 10 1 19 3 29 -104 -6 -196 -56 -258 -132 a 125 125 0 0 0 39 168 c -21 -1 -40 -6 -57 -16 v 2 c0 61 43 111 100 123 a127 127 0 0 1 -56 2 c 16 50 62 86 117 87 A 252 252 0 0 1 0 498 a 355 355 0 0 0 550 -301 l -1 -16 c 25 -17 46 -40 63 -65 z"  />
</svg>
    </a>
</div>

.loader {
  width:20vw;
  max-height:90vh;
  transform-origin:50% 50%;
  overflow:visible;
  .ci1 {
    fill: var(--higru);
    animation: toBig 3s infinite -1.5s;
    transform-box: fill-box;
    transform-origin:50% 50%;
  }
  .ciw {
    transform-box: fill-box;
    transform-origin:50% 50%;
    animation: breath 3s infinite;
  }
 
  .ci2 {
    fill: var(--higru);
    animation: toBig2 3s infinite;
    transform-box: fill-box;
    transform-origin:50% 50%;

  }
}
.points {
  animation: rot 3s infinite;
  transform-box: fill-box;
    transform-origin:50% 50%;
}
@keyframes rot  {
  0% {
    transform:  rotate(0deg);
  }
  30% {
    transform:  rotate(360deg);
  }
  50% {
    transform:  rotate(360deg);
  }
  80% {
    transform:  rotate(0deg);
  }
  100% {
    transform:  rotate(0deg);
  }
  
}
@keyframes toBig  {
  0% {
    transform:  scale(1) translateX(0px);
  }
  30% {
    transform:  scale(1) translateX(0px);
  }
  50% {
    transform:  scale(10) translateX(-4.5px);
  }
  80% {
    transform:  scale(10) translateX(-4.5px);
  }
  100% {
    transform:  scale(1) translateX(0px);
  }
  
}
@keyframes toBig2  {
  0% {
    transform:  scale(1) translateX(0px);
  }
  30% {
    transform:  scale(1) translateX(0px);
  }
  50% {
    transform:  scale(10) translateX(4.5px);
  }
  80% {
    transform:  scale(10) translateX(4.5px);
  }
  100% {
    transform:  scale(1) translateX(0px);
  }
}
@keyframes breath  {
  15% {
    transform:  scale(1) ;
  }
 
  40% {
    transform:  scale(1.1) ;
  }  
 65% {
    transform:  scale(1) ;
  }
  
  90% {
    transform:  scale(1.1) ;
  }
  
}







@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
html { 
  height: 100%; 
  color: #FFF; 
}
body {
  --higru:#1A2A3A;
  font-family: Roboto, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height:100%;
  background: var(--higru);  
}

*,
*:before,
*:after {
  position: relative;
  box-sizing: border-box;
}

.dwf, .share {
  position:fixed;
  bottom:4px;
  right:10px;
  background-color:#0003;
  padding:3px;
  border-radius:3px;
  .btn {
    color:#fff;
    text-decoration:none
  }
  a {
    color:#fff;
    text-decoration:none;
  }
}
.share {
  right:auto;
  left:10px;
  border-radius:50%;
  padding:5px;
  .twitter {
    width: 20px;
    fill:#fff;
    stroke:none;
    overflow:visible;
  }
 
}

console.clear();