7 Replies
yes: you have to generate randomness
how would i do that?
good luck
I'd recommend using an SVG for something like this: https://www.fffuel.co/nnnoise/
fffuel.co
nnnoise: Online SVG Noise Texture Generator
Use this SVG generator to create subtle noise textures and add an organic feel to pages/elements on the web by using these textures as background images.
that is actually really cool
The SVG suggestion above is the way to go with this. However.... as a side note we can create noise in CSS with a gradient hack. When I say hack I really mean hack in the truest sense of the word. No cross browser support and is likely to be fixed at some point so don't use in production but just for the curious: https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/
I also remember hearing that the random generation ability of SVG is/was suppose to be coming to CSS filter at some point. Not sure if that's still going to happen.
I love that fffuel site it's so cool, they have a really helpful breakdown on svgs too. Affiyionally you could apply your own svg filter like <feTurbulence> or a combination of svg filters for the effect you're looking for
https://tympanus.net/codrops/2019/01/15/svg-filters-101/
Sara Soueidan
Codrops
SVG Filters 101 | Codrops
CSS currently provides us with a way to apply color effects to images such as saturation, lightness, and contrast, among