Na terceira parte, aplico filtros.
GOOD MOOD (série de 6 partes)
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.