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.
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
5 Replies
Are you using a Mac? The last time I played with SVG filters, they worked on Firefox, Chrome, Edge, and Opera, but it completely failed on Safari.
I'm not. I'm just way out of my depth.
I solved this by generating a background, and giving everything opacity.
It's not a good solution, but it's a solution. It's also really 90s looking. I am not a good designer.
You could try playing with mix-blend-mode instead of using opacity.
to use inline encoded SVG in a CSS background you have to use single quotes to not interfere with the double quotes of the
url("") syntax. Try throwing your svg through this: https://yoksel.github.io/url-encoder/I noticed this about 90 minutes ago, but i've been in 3, back-to-back meetings since then, and I'm about to go into another.
It makes me wonder whether I did, actually do the right thing in some places aside from flubbing the encoded SVG.
I should just play in a playground for it.
Likewise, I also want to combine some noise and some sparse high-energy bits, and see how that can be done. Partly, this is where I'm learning the vocabulary of the system.