Kevin Powell - CommunityKP-C
Kevin Powell - Communityβ€’2y agoβ€’
7 replies
rik

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.
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Was this page helpful?