<svg viewBox="0 0 120 120">
  <g class="g1">
  <rect class="r1" x="30" y="30" width="60" height="60" />  
  <rect  class="big" x="81" y="81" width="8" height="8" />  
  <rect class="r_ol" x="31" y="31" width="8" height="8" />  
  <rect  class="r_or" x="81" y="31" width="8" height="8" />  
  <rect class="r_ul"  x="31" y="81" width="8" height="8" />  
  <xrect  class="r_ur" x="81" y="81" width="8" height="8" />
    </g>
  </svg>






<div class="dwf">
  <a class="btn" href="https://codepen.io/uchardon/">done with fun - @uchardon &copy; 2018</a></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>

svg {
  stroke:none;
  fill:var(--backgroundcolor);  
}
.r1 {
  fill:#fff;
}
.big {
  transform:  scale(5) translate( calc( -9px / 5  ) , calc( -9px / 5  ) );
  transform-origin:100% 100%;
  transform-box:fill-box;
}
.r_ol {
  transform-origin:0% 0%;
  transform-box:fill-box;
}

svg {
  .r_ol {
    animation: small2big 4s ease-in-out infinite;
  }
  .big {
     animation: big2small 4s ease-in-out infinite;
  }
  .r_or {
     animation: or2ol 4s ease-in-out infinite;
  }
  .r_ul {
     animation: ul2ol 4s ease-in-out infinite;
  }
  .g1 {
    animation: rot 8s ease infinite;
  }
}
@keyframes or2ol {
  0% {
    transform: scale(1) translate( 0 );
  }
  25% {
    transform: scale(1) translate( 0 );
  }
  50% {
     transform: scale(1) translate( -50px,0 );
  }
  50.001% {
    transform: scale(1) translate( 0 );
  }
}
@keyframes ul2ol {
  0% {
    transform: scale(1) translate( 0 );
  }
  75% {
    transform: scale(1) translate( 0 );
  }
  100% {
     transform: scale(1) translate( 0,-50px );
  }
 
}

@keyframes small2big {
  0% {
     transform: scale(1) translate( 0 );
  }
  25% {
     transform: scale(5) translate( calc( 9px / 5  ) , calc( 9px / 5  ) );
  }
  50% {
     transform: scale(5) translate( calc( 9px / 5  ) , calc( 9px / 5  ) );
  }
  50.001% {
     transform: scale(1) translate( 0 );
  }
  75% {
     transform: scale(5) translate( calc( 9px / 5  ) , calc( 9px / 5  ) );
  }
  100% {
     transform: scale(5) translate( calc( 9px / 5  ) , calc( 9px / 5  ) );
  }
}
@keyframes big2small {
  0% {
    transform: scale(5) translate( calc( -9px / 5  ) , calc( -9px / 5  ) );
  }
  25% {
      transform: scale(1) translate( 0 );
  }
  50% {
    transform: scale(1) translate( 0,-50px );
  }
  50.001% {
    transform: scale(5) translate( calc( -9px / 5  ) , calc( -9px / 5  ) );
  }
  75% {
      transform: scale(1) translate( 0 );
  }
  100% {
    transform: scale(1) translate( -50px,0px );
  }
}

@keyframes rot {
  0% {
    transform: rotate(45deg);
  }
  
  12.5% {
      transform: rotate(45deg);
  }
  25% {
    transform: rotate(135deg);
  }
  
  37.5% {
    transform: rotate(135deg);
  }
  50% {
    transform: rotate(225deg);
  }
  
  62.5% {
    transform: rotate(225deg);
  }
  75% {
    transform: rotate(315deg);
  }
  87.5% {
    transform: rotate(315deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

.g1 {
  transform-origin:50% 50%;
  transform: rotate(45deg);
}
* {
  transition:all 1s ease-in-out;
}


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

*,
*: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
  }
}
.share {
  right:auto;
  left:10px;
  border-radius:50%;
  padding:5px;
  .twitter {
    width: 20px;
    fill:#fff;
    stroke:none;
    overflow:visible;
  }
}

console.clear();