Static noise in background
I just encountered this site which has a very subtle static noisy texture in the white background (appears when zooming in). How is this type of thing implemented? Which parts of css should I look into to remake this? Thanks
https://www.basicagency.com/
BASIC/DEPT®
BASIC/DEPT® | Digital Branding & Product Design Agency
We design digital products, services, and eCommerce experiences for brands like Google, Airbnb, Patagonia, Apple, Beats by Dre and other category leaders.
2 Replies
You can work this out using dev tools.
It uses a very small background image placed within a pseudo element which occupies 100% of the viewport.
It then then animates the element using CSS keyframes, specifically animating the
It then then animates the element using CSS keyframes, specifically animating the
transform: translate3d(); property.
Another possibility (I know nothing about this but is on my list to investigate) SVG filters
Specifically turbuoence which can make noise which can be animated to static
Ana tudor has mastered using all the svg filters , here's some pens
MDN Web Docs
<feTurbulence> - SVG: Scalable Vector Graphics | MDN
The <feTurbulence> SVG filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion.