codepens/the-goo-filter-illustrated/README.markdown

731 B

The "Goo Filter" illustrated

_A Pen created at CodePen.io. Original URL: https://codepen.io/chrisgannon/pen/JpYKOg.

###Click the circles to animate them to demonstrate the effect further. I spoke at GenerateConf last year and I used this pen to demonstrate how the 'goo' filter is working.

  1. First we apply a blur to the contents of a group.
  2. Then we apply a color matrix filter to boost the transparent areas back up to full opacity.

The result is a liquid effect - every time two object come close to each other their blurred edges touch but because those edges have their opacity boosted to full they appear to join together like liquid.