<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;
transform-origin: 51% 50%;
transform-origin: 51% 50%
}
@keyframes drift {
from {
transform: rotate(0)
}
from {
transform: rotate(360deg)
}
}
This Pen doesn't use any external JavaScript resources.