Pular para o conteúdo principal

Atualização GOOD MOOD: filtro

· Leitura de 2 minutos

Na atualização, melhoro a implementação do filtro.

Primeira abordagem​

Na primeira implementação, criei dois elementos filter com os seguintes ids:

  • distorion-filter, que usava os elementos feTurbulence e feDisplacementMap para criar o efeito de desenho irregular
  • blur-filter, que usava o elemento feGaussianBlur para adicionar um pouco de desfoque

Com os elementos filter definidos, os apliquei em dois elementos g aninhados para aplicar um filtro em cima do outro:

info

Omiti alguns elementos e atributos para manter o código conciso.

index.html
<svg>  <defs>    <filter id="distortion-filter">      <feTurbulence />      <feDisplacementMap />    </filter>    <filter id="blur-filter">      <feGaussianBlur />    </filter>    <!-- elementos `path` -->  </defs>  <!-- elemento `rect` -->  <g filter="url(#blur-filter)">    <g filter="url(#distortion-filter)">      <!-- elementos `use` -->    </g>  </g></svg>

Esta abordagem funcionou, mas existe uma forma mais correta e que apresenta um desempenho melhor.

Atributos result, in e in2​

Utilizei os atributos result, in e in2 na abordagem anterior, passando o resultado do elemento feTurbulence para a entrada do elemento feDisplacementMap.

Da mesma forma, desta vez usei o resultado do elemento feDisplacementMap como entrada do elemento feGaussianBlur, usando os atributos result e in, respectivamente.

Assim, eliminei a necessidade de dois elementos filter, e de dois elementos g aninhados:

info

Omiti alguns elementos e atributos para manter o código conciso.

index.html
<svg>  <defs>    <filter id="distortion-filter">      <feTurbulence        type="turbulence"        baseFrequency="1"        numOctaves="2"        seed="0"        result="turbulence"      >        <!-- elemento `animate` -->      </feTurbulence>      <feDisplacementMap        in="SourceGraphic"        in2="turbulence"        scale="0.3"        result="displacement-map"      />      <feGaussianBlur        in="displacement-map"        stdDeviation="0.06"      />    </filter>    <!-- elementos `path` -->  </defs>  <!-- elemento `rect` -->  <g filter="url(#distortion-filter)">    <!-- elementos `use` -->  </g></svg>

Resultado​

Com essa pequena mudança, melhorei a fluidez da animação no Safari:

Primeira abordagem

Primeira abordagem

Segunda abordagem

Segunda abordagem

Leitura recomendada​