Какой подход к созданию полноэкранной анимации белого шума в браузере будет более производительным?
=====================================================================================================

 Приветствую. Всех с наступающим!  
  
**Задача:**   

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

- белый шум (хаотические мельтешения)  

- горизонтальные полосы (движущиеся вертикально с разной скоростью, высотой и прозрачностью)  

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

1) Циклическая покадровая генерация шума, полос и фона с отрисовкой на полноэкранном canvas (возможно, использование 3-х элементов canvas с послойно разделенной анимацией).  

2) Анимация заранее созданных картинок (либо однократная генерация отдельных png-изображений с шумом и полосами) в элементах DOM, путем изменения background-position.  

3) Использовать для анимации css3 (возможно, в комбинации со вторым вариантом).  

4) Использовать для анимации SVG (с имеющимися фильтрами и т.д. удобствами).  
  
**Примечания:**   

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

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

Без изменения градиента - все выглядит более менее шустро.  

Как повысить производительность этой многослойной анимации?  

Какие моменты надо иметь ввиду, для более грамотного и красивого решения этой задачи?  

Спасибо. 

 тайловый gif ) 

 Как бы я сделал генерацию подобного видео например, в AfterEFfects, сверху вниз:  

3. слой с градиентом  

2. слой с полосами  

1. слой с шумом  

0. исходное изображение  

Самое ресурсоёмкое - шум с прозрачностью, там много вычислений при генерировании и много данных для распаковки при показе. Но, можно зациклить от 3 до 5 кадров и никто ничего не заметит.  

То есть предложение такое - шум посчитать в GIF (видео с прозрачностью, да на всё окно я не знаю, можно ли показать), а остальное - рисовать средствами js. 

 Если бы просто белый шум, то здесь явно проход по пикселям и Math.random ).  

А полосы можно сверху наложить и анимировать каким-нибудь CSS.  
  

А ещё можете поиграться с принципом цикады, вдруг выйдет что. Чередование наложенных друг на друга картинок, думаю, съест меньше всего ресурсов.