<div class="group group-old">
  <div class="rect"></div>
  <div class="rect"></div>
</div>
<div class="label label-old">Regular</div>
<div class="group group-new">
  <div class="rect"></div>
  <div class="rect"></div>
</div>
<div class="label label-new">Masked (with feComposite operator="atop")</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="old-goo">
      <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" />
  	</filter>
    <filter id="fancy-goo">
      <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="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
  </defs>
</svg>
@import "compass/css3";

.group{
  position:absolute;
  top:0;
  left:0;
  width:50%;
  height:100%;
  filter:url("#old-goo");
}
.group-new{
  left:50%;
  filter:url("#fancy-goo");
}
.rect{
  width:100px;
  height:100px;
  background:black;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-50px;
  margin-left:-50px;
}

@keyframes rect-anim-left{
  0%{
    transform:translateX(-10px);
  }
  100%{
    transform:translateX(-60px);
  }
}
.rect{
  animation:rect-anim-left ease-in-out 2s infinite alternate;
}
@keyframes rect-anim-right{
  0%{
    transform:translateX(10px);
  }
  100%{
    transform:translateX(60px);
  }
}
.rect+.rect{
  height:150px;
  margin-top:-75px;
  animation:rect-anim-right ease-in-out 2s infinite alternate;
}
.label{
  position:absolute;
  top:30px;
  left:0;
  width:50%;
  text-align:center;
}
.label-new{
  left:50%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js