<svg class="m-logo" shape-rendering="crispEdges" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   viewBox="0 0 200 200">
 <style>
    .st0{fill:#66AF4C;} .st1{fill:#5D9D68;} .st2{fill:#52868A;} .st3{fill:#4874A6;} .st4{fill:#8CB13F;} .st5{fill:#849857;} .st6{fill:#7A7C73;} .st7{fill:#72638A;} .st8{fill:#BAB230;} .st9{fill:#B39442;} .st10{fill:#AB6F57;} .st11{fill:#A45069;} .st12{fill:#E0B423;} .st13{fill:#DA9031;} .st14{fill:#D36541;} .st15{fill:#CD404E;} .st16{fill:#FFFFFF;}
  </style>
<rect       class="box wave1 st0" width="50" height="50"/>
<rect x="50" class="box wave2 st1" width="50" height="50"/>
<rect x="100" class="box wave3 st2" width="50" height="50"/>
<rect x="150" class="box wave4 st3" width="50" height="50"/>
  
<rect y="50"       class="box wave2 st4" width="50" height="50"/>
<rect x="50" y="50" class="box wave3 st5" width="50" height="50"/>
<rect x="100" y="50" class="box wave4 st6" width="50" height="50"/>
<rect x="150" y="50" class="box wave5 st7" width="50" height="50"/>
  
<rect y="100"       class="box wave3 st8" width="50" height="50"/>
<rect x="50" y="100" class="box wave4 st9" width="50" height="50"/>
<rect x="100" y="100" class="box wave5 st10" width="50" height="50"/>
<rect x="150" y="100" class="box wave6 st11" width="50" height="50"/>
  
<rect y="150"       class="box wave4 st12" width="50" height="50"/>
<rect x="50" y="150" class="box wave5 st13" width="50" height="50"/>
<rect x="100" y="150" class="box wave6 st14" width="50" height="50"/>
<rect x="150" y="150" class="box wave7 st15" width="50" height="50"/>
  
<path shape-rendering="auto" class="st16" d="M173.4,113.1c-5.3,8.3-10,14.6-14.3,18.9c-4.3,4.3-10.3,6.5-18,6.5c-5.3,0-9.2-1.7-11.9-5
  c-2.7-3.3-4-7.3-4-11.8c0-3.3,0.4-6.2,1.2-8.6c0.8-2.4,1.9-5.1,3.3-8c1.4-2.9,4.2-8.6,8.6-17.1c4.3-8.5,6.5-14.1,6.5-16.6
  c0-1.1-0.2-1.9-0.7-2.4c-0.5-0.5-1.2-0.8-2.2-0.8c-1.2,0-2.7,0.7-4.4,2.1c-1.7,1.4-3.8,3.8-6.4,7.2c-2.5,3.4-5,7.5-7.3,12.3
  c-2.3,4.8-5.4,11.3-9.3,19.6c-3.8,8.3-6.7,14.4-8.5,18.3c-1.8,3.9-3.2,7-4.2,9.2H72.2c0.5-1.1,2.8-6.2,6.9-15.4
  c4.1-9.1,8.1-18.1,12.1-27c4-8.8,6.2-13.8,6.8-14.9c0.5-1.1,1-2.5,1.6-4.1c0.6-1.6,0.8-3,0.8-4.2c0-1.1-0.2-1.9-0.7-2.5
  c-0.5-0.6-1.1-0.8-2-0.8c-1.3,0-2.8,0.7-4.6,2.1c-1.7,1.4-3.5,3.3-5.2,5.6c-1.8,2.3-3.5,4.9-5.2,7.7c-1.7,2.8-3.1,5.5-4.2,7.9
  L56.2,137H26.6l26.2-57.6c0.2-0.5,0.7-1.7,1.4-3.6c0.8-1.9,1.1-3.5,1.1-4.9c0-1-0.2-1.7-0.6-2.2c-0.4-0.5-1-0.7-1.8-0.7
  c-1,0-2.5,0.7-4.3,2c-1.9,1.3-3.7,3-5.6,5.2c-1.9,2.1-3.7,4.5-5.5,7.3c-1.8,2.7-3.8,6-5.9,9.9l-1.8-0.9c5.4-10.7,10.5-18.1,15.4-22
  c4.9-3.9,10-5.9,15.2-5.9c4.8,0,8.7,1.7,12,5c3.2,3.3,4.9,7.4,4.9,12.2c0,2.2-0.1,4.1-0.3,5.6c-0.2,1.5-0.5,3-0.9,4.4l0.5,0.2
  c5.7-11.1,10.6-18.5,14.9-22c4.3-3.5,9-5.3,14.2-5.3c5.3,0,9.6,1.4,13,4.3c3.4,2.9,5.1,6.7,5.1,11.5c0,2.2-0.3,4.3-0.8,6.1
  c-0.8,2.1-1.4,3.7-1.7,4.6c5.2-9.5,9.6-16.3,13.3-20.4c3.7-4.1,9.3-6.1,16.8-6.1c5,0,9.1,1.5,12.3,4.4c3.2,2.9,4.9,7.5,4.9,13.7
  c0,3.4-0.5,6.5-1.6,9.1c-1.1,2.6-2.7,6.3-5,11.1c-2.3,4.8-5.2,10.5-8.8,17.3c-3.6,6.8-5.4,10.9-5.4,12.4c0,0.9,0.2,1.6,0.6,2.1
  c0.4,0.5,1,0.8,1.7,0.8c2.9,0,6-1.8,9.3-5.4c3.2-3.6,5.7-6.6,7.4-9.2c1.7-2.5,3.4-5.1,5-7.7L173.4,113.1z"/>
</svg>

body{
  background: #eeeecf;
  margin: 0;
}
.m-logo{
  display: block;
  width:50%;
  max-width:300px;
  min-width:100px;
  height:auto;
  margin: 20vh auto 0;
}

.box {
  opacity:0;
  animation: wavey 5s ease alternate infinite;
  &.wave2 {
    animation-delay: 0.1s;
  }
  &.wave3 {
    animation-delay: 0.3s;
  }
  &.wave4 {
    animation-delay: 0.5s;
  }
  &.wave5 {
    animation-delay: 0.7s;
  }
  &.wave6 {
    animation-delay: 0.9s;
  }
  &.wave7 {
    animation-delay: 1.1s;
  }
  
}
@keyframes wavey {
  90% {
    opacity:1.2;
  }
  100% {
    opacity:.5;
  }
}