Kawałek Kodu

Kto jeszcze nie zdążył się wyszumieć, będzie mieć szanse dziś. Co prawda jest niedziela, ale może to dobra okazja, w końcu dla większości dzień wolny, więc można go spożytkować w mniej praktyczny sposób. Będzie krótko i na temat, dosłownie.

Szum z przeszłości z echem.

Pamiętasz jak w poprzednim wpisie dotyczącym szumu stworzyliśmy jego wersję w SVG. Nie była ona animowana, tzn. szum był statyczny, ale po nim bawilismy się również animowanym ogniem w SVG. Czyli da się animować w SVG. Dlaczego więc nie przekształcić efektu statycznego w dynamiczny?

Mieliśmy tam SVG w postaci:

<svg>
  <filter id="noise">
    <feTurbulence type="fractalNoise" baseFrequency="0.7" result="A" /> 
    <feColorMatrix
        in="A"
          type="matrix"
          values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"
        />
  </filter>
</svg>

Pierwszy filtr tworzy nam kolorowe "zawirowania", które przy odpowiednio dobranej częstotliwości (rosnącej) zagęszczają się tworząc nie gładkie plamy, ale powierzchnię niczym piasek, czyli nasz szum. Drugi filtr nie jest koniecznie potrzebny, ale używamy go do przekształcenia kolorów na odcienie szarości.

No, dobra. To było i jest oczywiste. Póki co efekt nadal jest statyczny, a od gadania nie zacznie się ruszać. W przypadku efektu ognia używaliśmy elementu animate dla filtra feTurbulence. Skoro tak, to dodajmy go i tu.

<svg>
  <filter id="noise">
    <feTurbulence type="fractalNoise" baseFrequency="0.6" result="A">

      <animate
        attributeType="XML"
        attributeName="seed"
        values="22;1;67;123;13;65;99"
        dur="0.25s"
        calcMode="linear"
        repeatCount="indefinite"
      />

    </feTurbulence>

    <feColorMatrix
      in="A"
      type="matrix"
      values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"
    />
  </filter>
</svg>

Element animate jest wewnątrz elementu feTurbulence. Możliwe jest również wyprowadzenie go na zewnątrz, ale wtedy musimy zlinkować go z docelowym elementem (lub filtrem). Robimy to w ten sposób:

<element_animowany id="element"/>
<!-- tu mogą pojawić się inne elementy -->
<animate xlink:href="#element" ... />

W przykładzie animujemy ziarno generatora losowego. Wartości początkowe dla ziarna zostały dobrane... losowo. Czas trwania całej animacji jest bardzo krótki i w sumie nie ma znaczenia czy easing będzie linearny czy skokowy (calcMode=linear/discrete). Krótki czas i zapętlenie animacji dają nam efekt jaki pożądaliśmy. I przeciwieństwie do kombinacji z gradientem, ten efekt działa na urządzeniach mobilnych bez problemu.

Aby więcej nie namieszać, kończę. Dobrej niedzieli i do przeczytania!

Przydatne linki:
Jak się wyszumieć, czyli o losowym tle w CSS.
Bądź jak Prometeusz, czyli o animowanym efekcie ognia w SVG.