comparison between methods of applying the goo filter

comparison-between-methods-of-applying-the-goo-filter.markdown

comparison between methods of applying the goo filter

A Pen by Kolja on CodePen.

License.

index.html

<div class="group">
  <div class="rect top">
    <h2>Hallo</h2>
  </div>
  <div class="rect bottom">
    <h2>Das ist ein test</h2>
  </div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="gooey">
      <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>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

//@import "compass/css3";

h2 {
  color: white;
  height: 3rem;
  font-size: 3rem;
  white-space: nowrap;
  margin: 0;
  line-height: 1;
}
.group {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  filter: url("#gooey");
}
.rect {
  width: max-content;
  background: black;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  padding: 0.5rem;
}

.rect.top {
  width: max-content;
  height: max-content;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

.rect.bottom {
  height: 3rem;
  margin-top: 0px;
  animation: rect-anim-right ease-in-out 2s infinite alternate;
}

@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);
  }
}