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.