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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.