Paint Drop com Gooey Effect

Recentemente estava lendo um artigo no CSS Tricks sobre um efeito criado pelo brasileiro Lucas Bebber chamado Gooey Effect no qual se utiliza um SVG filter para fazer parecer que os elementos que estão mais perto uns dos outros estão grudados. (https://css-tricks.com/gooey-effect/) , e isso me deu uma inspiração para criar um outro efeito com base no Gooey.

A ideia desse efeito é criar a intenção de que está caindo um balde de tinta em seu site.

Estrutura

Para se criar o efeito, você precisa criar uma pequena estrutura de elementos, é bem simples.

.wrapper
    ├── .column
    └── .content

O .wrapper é o elemento no qual será adicionado o efeito principal.

Note que a class tem white-space: nowrap e overflow-x: hidden, pra que o não exista espaços indevidos entre as colunas e também não apareça uma coluna extra caso a largura do seu elemento seja inferior ao das colunas.

See the Pen Gooey Effect wrapper by Jefferson Moura (@jeffersonmourak) on CodePen.

O .content é o elemento que você adiciona caso queira ter algum conteúdo dentro do efeito, e assim você pode ter por exemplo o nome da sua aplicação ou a logo da sua empresa, fica ao seu critério as informações contidas no Content.

Basicamente é um quadrado com a mesma cor das colunas,

See the Pen Gooey Effect content by Jefferson Moura (@jeffersonmourak) on CodePen.

As .column São os elementos que irão fazer as linhas da tinta, e assim ficar algo mais "realista". Elas são divs com tamanho variado e com as bordas inferiores arredondadas.

See the Pen Gooey Effect columns by Jefferson Moura (@jeffersonmourak) on CodePen.

Após isso você pode adicionar uma animação pra parecer realmente que a tinta está sendo derramada na sua página.