<div class="box">
  <div class='wave one'></div>
  <div class='wave two'></div>
</div>
body{
  background:#455A64;
}

.box{
    height: 60vh;
    width: 60vh;
    overflow: hidden;
    margin: 5vh;
    background: #B2EBF2;
    position:relative;
    border-radius: 5%;
    box-shadow: 2px 2px 30px -7px #1d1e22;
}

.wave {
    position:absolute;
    opacity: .6;   
    width: 150%;
    height: 150%;
    top:50%;
    left:-10vh;
    transform: translate(-50%,50%);
}

.wave.one{
    background: yellow;
    border-radius: 44%/45%;
    animation: drift 6s infinite alternate;
}
.wave.two{
    background: #2196f3;
    border-radius: 70%/63%;
    animation: drift 8s infinite alternate;
}




@keyframes drift {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes drift2 {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.