[Stas404]

Приветствую. Всех с наступающим!

Задача:
Создать реалистичную полноэкранную анимацию а-ля помехи в телевизоре с возможностью подкладывать под нее различный контент.

Компоненты анимации:
- белый шум (хаотические мельтешения)
- горизонтальные полосы (движущиеся вертикально с разной скоростью, высотой и прозрачностью)
- фон с градиентом (от серого к более темному, со временем степень затемнения градиента скачкообразно и циклично меняется).

Возможные подходы к решению:
1) Циклическая покадровая генерация шума, полос и фона с отрисовкой на полноэкранном canvas (возможно, использование 3-х элементов canvas с послойно разделенной анимацией).
2) Анимация заранее созданных картинок (либо однократная генерация отдельных png-изображений с шумом и полосами) в элементах DOM, путем изменения background-position.
3) Использовать для анимации css3 (возможно, в комбинации со вторым вариантом).
4) Использовать для анимации SVG (с имеющимися фильтрами и т.д. удобствами).

Примечания:
Предполагается, что слой (или слои) с анимацией будут иметь полупрозрачность, для того чтобы был виден контент под анимацией, что и создает основную нагрузку на браузер.

При анимации слоя с шумом и изменении фонового градиента (через css3) наблюдается большая потеря производительности (например в FF подтормаживает. В chrome более-менее нормально ) - имеет ли смысл комбинировать css3 и js анимацию - либо лучше что-то одно?
Без изменения градиента - все выглядит более менее шустро.
Как повысить производительность этой многослойной анимации?
Какие моменты надо иметь ввиду, для более грамотного и красивого решения этой задачи?
Спасибо.