codepens/the-goo-filter-illustrated
Dym Sohin f132183c1d init 2023-10-06 23:12:53 +02:00
..
dist init 2023-10-06 23:12:53 +02:00
src init 2023-10-06 23:12:53 +02:00
README.markdown init 2023-10-06 23:12:53 +02:00
license.txt init 2023-10-06 23:12:53 +02:00

README.markdown

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.