Which approach to create a fullscreen white noise animation in the browser would be more performant?

Question

JavaScript

Greetings. All with the upcoming!
Task:
Create a realistic full-screen animation a la interference on a TV with the ability to put various content under it.
Animation components:
- white noise (chaotic flickering)
- horizontal stripes (moving vertically at different speeds, heights and transparency)
- background with a gradient (from gray to darker, over time, the degree of darkening of the gradient changes abruptly and cyclically).
Possible approaches to the solution:
1) Frame-by-frame generation of noise, stripes and background with drawing on a full-screen canvas (possibly using 3 canvas elements with layer-by-layer separated animation).
2) Animation of pre-created images (or single generation of separate png images with noise and stripes) in DOM elements by changing the background-position.
3) Use css3 for animation (perhaps in combination with the second option).
4) Use SVG for animation (with existing filters, etc. conveniences).
Notes:
The animation layer(s) are supposed to be semi-transparent to show the content underneath the animation, which is what puts most of the load on the browser.
When animating a layer with noise and changing the background gradient (via css3), there is a big performance loss (for example, it slows down in FF. In chrome, it's more or less normal) - does it make sense to combine css3 and js animation - or is one better?
Without changing the gradient - everything looks more or less smart.
How to improve the performance of this layered animation?
What points should be kept in mind for a more competent and beautiful solution to this problem?
Thank you.

Answer 1

tiled gif )

Answer 2

How would I generate such a video, for example, in AfterEFfects, from top to bottom:
3. layer with a gradient
2. layer with stripes
1. layer with noise
0. original image
The most resource-intensive is noise with transparency, there are a lot of calculations when generating and a lot of data for unpacking at the show. But, you can loop from 3 to 5 frames and no one will notice anything.
That is, the proposal is this - to calculate the noise in GIF (video with transparency, but I don’t know if it can be shown on the entire window), and draw the rest using js tools.

Answer 3

If it were just white noise, then there is clearly a pixel-by-pixel pass and Math.random ).
And the stripes can be overlaid on top and animated with some CSS.
And you can also play around with the cicada principle, suddenly something comes out. Alternating images superimposed on each other, I think, will eat the least resources.