Applying scintillation and noise effects, with CSS
I'm trying to create an effect similar to noise and scintillation in night vision devices. Example images can be seen on this page: https://www.cloudynights.com/topic/691671-improved-ebi-images-with-five-tubes/
What I'm after is both the "grainy" look, and the bright scintillations, using CSS, on top of text (h1 through h3 elements) and td backgrounds.
I followed the tutorial on https://www.freecodecamp.org/news/grainy-css-backgrounds-using-svg-filters/ using both their SVG and a generator at https://fffuel.co/nnnoise/ and neither seemed to achieve the effect.
I've got a collaboration on JSFiddle with my attempts so far for this here: https://jsfiddle.net/6L5yw4nh/21/#&togetherjs=VmU1H2Sv4f
I would appreciate help, guidance, understanding, and hints.
What I'm after is both the "grainy" look, and the bright scintillations, using CSS, on top of text (h1 through h3 elements) and td backgrounds.
I followed the tutorial on https://www.freecodecamp.org/news/grainy-css-backgrounds-using-svg-filters/ using both their SVG and a generator at https://fffuel.co/nnnoise/ and neither seemed to achieve the effect.
I've got a collaboration on JSFiddle with my attempts so far for this here: https://jsfiddle.net/6L5yw4nh/21/#&togetherjs=VmU1H2Sv4f
I would appreciate help, guidance, understanding, and hints.
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time π.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
