<!DOCTYPE html>
<html>
<head>
<style>
.svg-composite {
filter: url("#composite");
}
.ball {
border-radius: 50%;
width: 10rem;
height: 10rem;
position: absolute;
background-color: #9bbfde;
}
.ball:nth-of-type(2) {
background-color: #9bbfde;
animation: moveAnim 3s ease infinite alternate;
}
@keyframes moveAnim {
from { left: 8rem; }
to { left : 12rem; }
}
</style>
</head>
<body>
<svg width="0" height="0">
<defs>
<filter id="stiction">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="fec1" />
<feComposite in="SourceGraphic" in2="fec1" operator="atop" />
</filter>
</defs>
</svg>
<svg width="0" height="0">
<defs>
<filter id="composite">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="gaussianBlur"/>
<feColorMatrix in="gaussianBlur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="colorMatrix"/>
<feBlend in="SourceGraphic" in2="colorMatrix">
</filter>
</defs>
</svg>
<div class="svg-composite">
<div class="ball"></div>
<div class="ball"></div>
</div>
<div class="profile">
<div class=" btn-up">
<div>
<i id="ball1" class="round"></i>
<i id="ball2" class="round active"></i>
</div>
</div>
</div>
<style>
.profile {
height: 100%;
background: #aaaa7f;
font-size: 14px;
}
.btn-up{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
left: 0;
}
.btn-up>div{
filter: url("#stiction");
}
.round {
width: calc(160%);
height: 50px;
border-radius: 0;
background-color: #9bbfde;
position: absolute;
left: -30px;
margin: auto;
z-index: 1;
}
#ball2 {
top: 0px;
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
}
.active {
left: 100px;
animation: ballUp .5s forwards;
}
@keyframes ballUp {
from {
top: 0;
}
to {
top: -25px;
}
}
</style>
</body>
</html>
