<div class="container">
  <h1 class="text">Shouvik Mitra</h1>
  <div class="wave wave-back"></div>
  <div class="wave wave-middle"></div>
  <div class="wave wave-front"></div><a href="#how-bolo-works" class="fab">
 </div>
body{
  overflow:hidden;  
}

.text{
  color : #954eeb;
  position: relative;
  top: 40vh;
  text-align: center;
  font-family: 'Roboto Slab', arial;
}
.wave {
    overflow-x : hidden;
    border-radius: 45%;
    bottom: 0;
    height: 350vw;
    left: 50%;
    margin-left: -175vw;
    position: absolute;
    top: 90vh;
    width: 350vw
}
.wave-front {
    animation: drift 13s infinite cubic-bezier(.4,0,.2,1);
    background-color: #d2b6ff;
    opacity: 1
}
 .wave-middle {
    animation: drift 15s infinite cubic-bezier(.4,0,.2,1);
    background-color: #d2b6ff;
    opacity: 1
}
.wave-back {
    animation: drift 20s infinite cubic-bezier(.075,.82,.165,1);
    background-color: #954eeb;
    border-radius: 43%;
    opacity: .8;
    -ms-transform-origin: 51% 50%;
    transform-origin: 51% 50%
}

@keyframes drift {
    from {
        transform: rotate(0)
    }

    from {
        transform: rotate(360deg)
    }
}

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto+Slab

External JavaScript

This Pen doesn't use any external JavaScript resources.