Sticky (gooey) effect using CSS SVG Filters

index.html

<div class="bubbles-wrapper bubbles-circle">
  <div class="bubble">1</div>
  <div class="bubble">2</div>
  <div class="bubble">3</div>
  <div class="bubble">4</div>
  <div class="bubble">5</div>
  <div class="bubble">6</div>
</div><!-- remove spaces
--><div class="bubbles-wrapper bubbles-vertical">
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="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>
  </defs>
</svg>

scripts

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

sticky-gooey-effect-using-css-svg-filters.markdown

Sticky (gooey) effect using CSS SVG Filters

The Gooey Effect inspired by http://css-tricks.com/gooey-effect/. Essentially it uses SVG Filters to get sticky (gooey) effect.

A Pen by Alex Marinenko on CodePen.

License.

style.scss

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  background: #ecf0f1;
  color: #444;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 1em;
}

$center: 48%;
$size: 50px;

.bubbles-wrapper {
  border: 1px solid #ccc;
  display: inline-block;
  filter: url('#goo');
  height: 350px;
  overflow: auto;
  position: relative;
  width: 50%;
  zoom: 1;
  
  .bubble {
    border-radius: 50%;
    font-size: 2em;
    height: $size;
    line-height: 1.5em;
    position: absolute;
    text-align: center;
    width: $size;
  }
}

.bubbles-circle {
  .bubble {
    background: #e74c3c;
    color: #e74c3c;
    transform: translate(0, 0) scale(1.5);

    left: $center;
    top: $center;

    animation: move-to-center-1 cubic-bezier(0.770, 0.000, 0.175, 1.000) 3s infinite alternate;

    &:nth-child(1) {
      animation-name: move-to-center-1;
    }

    &:nth-child(2) {
      animation-name: move-to-center-2;
      animation-delay: .1s;
    }

    &:nth-child(3) {
      animation-name: move-to-center-3;
      animation-delay: .2s;
    }

    &:nth-child(4) {
      animation-name: move-to-center-4;
      animation-delay: .3s;
    }

    &:nth-child(5) {
      animation-name: move-to-center-5;
      animation-delay: .4s;
    }

    &:nth-child(6) {
      animation-name: move-to-center-6;
      animation-delay: .5s;
    }
  }
  
  @keyframes move-to-center-1 {
    to {
      background: #3498db;
      color: #fefefe;
      transform: translate(0, -$size * 2);
    }
  }

  @keyframes move-to-center-2 {
    to {
      background: #3498db;
      color: #fefefe;
      transform: translate(-$size * 1.25, -$size * .75);
    }
  }

  @keyframes move-to-center-3 {
    to {
      background: #3498db;
      color: #fefefe;
      transform: translate($size * 1.25, -$size * .75);
    }
  }

  @keyframes move-to-center-4 {
    to {
      background: #3498db;
      color: #fefefe;
      transform: translate(-$size * 1.25, $size * .75);
    }
  }

  @keyframes move-to-center-5 {
    to {
      background: #3498db;
      color: #fefefe;
      transform: translate($size * 1.25, $size * .75);
    }
  }

  @keyframes move-to-center-6 {
    to {
      background: #3498db;
      color: #fefefe;
      transform: translate(0, $size * 2);
    }
  }
}

.bubbles-vertical {
  .bubble {
    background: #3BC29E;
    transform: translate(0, 0) scale(1.5);

    left: $size;
    top: $center;
    
    animation: move-to-right-1 cubic-bezier(.66,.1,.97,.36) 3s infinite alternate;
    
    &:nth-child(1) {
      animation-name: move-to-right-1;
      animation-delay: .25s * 1;
    }
    
    &:nth-child(2) {
      animation-name: move-to-right-2;
      animation-delay: .25s * 2;
    }
    
    &:nth-child(3) {
      animation-name: move-to-right-3;
      animation-delay: .25s * 3;
    }
    
    &:nth-child(4) {
      animation-name: move-to-right-4;
      animation-delay: .25s * 4;
    }
    
    &:nth-child(5) {
      animation-name: move-to-right-5;
      animation-delay: .25s * 5;
    }
  }
  
  @keyframes move-to-right-1 {
    to {
      transform: translate($size * .125, -$size * 3);
    }
  }
  
  @keyframes move-to-right-2 {
    to {
      transform: translate($size * 2.5, -$size * 2.5);
    }
  }
  
  @keyframes move-to-right-3 {
    to {
      transform: translate($size * 3.5, 0);
    }
  }
  
  @keyframes move-to-right-4 {
    to {
      transform: translate($size * 2.5, $size * 2.5);
    }
  }
  
  @keyframes move-to-right-5 {
    to {
      transform: translate($size * .125, $size * 3);
    }
  }
}