seregadushka, никто не говорит ни о каких картинках, с помощью фильтра можно нарисовать рандомные "облака" поверх картинки примерно так:

<svg width="0">
  <filter id="filter">
    <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
  </filter>
</svg>

<style>
body { 
  margin: 0; 
  width: 100%;
  height: 100%;
  filter: url(#filter);
}
</style>

Остаётся "всего лишь" добавить прозрачность и анимацию, можно прям в самом svg.:)

да, получилось даже проще -- Fog-SVG

<feFuncA type="table" tableValues="0 1" />

эта строка отвечает за НЕпрозрачнось, от 0 до 1 . Но мы видим, что алгоритм практически не интересует эта настройка -- он не формирует полностью прозрачных участков .
как раз для тумана это , может , и нормально выглядит. Уже не надо 2-3-слойных туманов.

Но если кому хочется настоящих конкретных туманов, как после пожара, то только серьезное аналоговое Fog-PNG на 1 МБ.

Aetae , вцелом, спасибо, эти <filter> -- хорошая вещь.

seregadushka, можно сделать так tableValues="0 0 1" (или ещё больше нулей), чтоб было больше прозрачного.:)

Aetae,
да, действительно , матрица какая-то .
Я уже хотел забросить, как рисунок, далекий от реальности. Сделал SVG на память.
Но тут такая красота и легкость. Это уже полноценные облака.
Или вулканическое озеро в Исландии.
PNG заметно тормозит перемещение.
Очевидно, что <filter> более прогрессивная технология.
По крайней мере. анимироваnь PNG сразу не возможно, а вот у <filter> параметров немеряно.

Все , что смог, я добавил.
Перемещение -- это не анимация. Хорошо бы анимировать его клубы, чтобы они шевелились.
Жаль, не работает любая анимация самого тумана.

<animate attributeName="baseFrequency" 
             from="0.005" 
             to="0.1" 
             dur="1s" 
             repeatCount="indefinite" />

Других параметров не нашел.

seregadushka, вот тут предлагают подход с hue-rotate: https://stackoverflow.com/questions/...ear-continuous

Т.е. крутить цвета и превращать их в альфу, а не оставлять изначально сгенерированную альфу.