Pular para o conteúdo principal

GOOD MOOD parte 3: aplicando filtros

· Leitura de 4 minutos

Na terceira parte, aplico filtros.


Aplicando filtros

Cirei filtros com o elemento filter, que fica dentro do elemento defs. No caso desta animação, usei os filtros feTurbulence, feDisplacementMap e feGaussianBlur. Usei os filtros referenciando o atributo id de cada um deles.

Para manter a consistência das cores, defini o atributo color-interpolation-filters="sRGB".

Filtro de distorção

Para ter o efeito de desenho irregular nas letras, usei a combinação de feTurbulence e feDisplacementMap. Experimentei valores diferentes nos atributos baseFrequency, numOctaves e scale até chegar em um resultado que ficasse próximo da animação original em telas com diferentes proporções de pixels. Falarei mais sobre isso na parte 4.

O elemento feTurbulence gera uma imagem usando a função de Ruído de Perlin (de acordo com os atributos type, baseFrequency, numOctaves e seed), enquanto o elemento feDisplacementMap usa os valores de pixel da imagem gerada (in2="turbulence") para deslocar espacialmente a animação (in="SourceGraphic").

O atributo result do elemento feTurbulence define um nome para o resultado, e este pode ser referenciado pelos atributos in ou in2.

O atributo scale do elemento feDisplacementMap define o fator de escala, quanto menor o número, menor o efeito.

Adicionei um elemento g para agrupar as letras, e nele referenciei o filtro.

<!--   omiti os elementos div definidos na parte 2  para manter o código conciso --><svg viewBox="0 0 63 51" color-interpolation-filters="sRGB">  <defs>    <filter id="distortion-filter">      <feTurbulence        type="turbulence"        baseFrequency="1"        numOctaves="2"        seed="0"        result="turbulence"      />      <feDisplacementMap        in="SourceGraphic"        in2="turbulence"        scale="0.3"      />    </filter>    <!--      omiti os demais elementos do elemento defs      para manter o código conciso     -->  </defs>  <!-- fundo preto -->  <rect width="63" height="51" fill="#000" />  <!-- letras -->  <g filter="url(#distortion-filter)">    <!--      omiti os elementos use      para manter o código conciso     -->  </g></svg>

Animando o filtro de distorção

Para criar o efeito de "tremor", usei o elemento animate dentro do elemento feTurbulence para animar o atributo seed. No intervalo de 1s, o atributo seed assume os valores de 1 a 5.

<!--   omiti demais elementos e atributos  para manter o código conciso --><feTurbulence>  <animate    attributeName="seed"    from="1"    to="5"    dur="1s"    repeatCount="indefinite"  /></feTurbulence>

Filtro de desfoque gaussiano

A animação não é totalmente nítida, então apliquei um pouco de desfoque gaussiano.

Na maioria dos navegadores, o atributo filter pode referenciar mais de um filtro: filter="url(#distortion-filter) url(#blur-filter)". Porém, isso não funciona no Safari, tive que adicionar mais um elemento g por fora do que já existia para aplicar o desfoque em cima da distorção.

Aqui a ordem também importa, neste caso o efeito de desfoque deve ficar por fora do efeito de distorção.

<!--   omiti os elementos div definidos na parte 2  para manter o código conciso --><svg viewBox="0 0 63 51" color-interpolation-filters="sRGB">  <defs>    <filter id="blur-filter">      <feGaussianBlur        in="SourceGraphic"        stdDeviation="0.06"      />    </filter>    <!--      omiti os demais elementos do elemento defs      para manter o código conciso     -->  </defs>  <!-- fundo preto -->  <rect width="63" height="51" fill="#000" />  <!-- letras -->  <g filter="url(#blur-filter)">    <g filter="url(#distortion-filter)">      <!--        omiti os elementos use        para manter o código conciso       -->    </g>  </g></svg>

Conclusão

Tendo os filtros aplicados, dei a reprodução como concluída.

Na próxima parte, faço algumas comparações entre navegadores e proporções de pixel: GOOD MOOD parte 4: proporção de pixel.

Leitura recomendada