div.wr
div.b1 +
div.b2 -
svg(xmlns="http://www.w3.org/2000/svg" version="1.1")
defs
filter(id="goo")
//- blob effect
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 18 -7" result="goo")
feBlend(in="SourceGraphic" in2="goo" result="res")
//- shadow
feGaussianBlur(in="res" stdDeviation="4" result="shadow")
feOffset(in="shadow" dx="0" dy="2" result="shadow")
feColorMatrix(in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0" result="shadow")
feBlend(in="res" in2="shadow")
View Compiled
@r: 50px;
@keyframes tst {
from {
height: 40px;
}
to {
height: 70px;
}
}
.wr {
-webkit-filter: url('#goo');
filter: url('#goo'); // NOTE: bg color must be transparent!
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: tst 1s infinite ease-in-out alternate;
}
.b1,
.b2 {
width: @r;
height: @r;
line-height: @r;
position: absolute;
left: -@r/2;
border-radius: 50%;
background-color: #8ada66;
color: white;
font-size: 2rem;
text-align: center;
}
.b1 {
top: -50%;
}
.b2 {
bottom: -50%;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.