Perlin Noise Mask

Hi All,

Needed some help and feedback on this integration I want to do. It’s called a Perlin Noise Mask. Essentially, you have your perlin generated gradient sliding underneath a div that is masked with holes, giving you the twinkling effect that I created in Figma (The demo video). I also attached a photo that shows the stack of it.

The steps are quite simple. And I have coding experience but, I still can’t seem to get it to work haha. Not sure if using an SVG is the best method for the dots, but pure CSS would be better I believe. And have better performance overall.

Essentially the steps are:

  1. draw a canvas with all your dots
  2. generate a perlin noise (Noise Maker)
  3. add mask-image: url('https://uploads-ssl.webflow.com/6643e747877b96c3ca0a5a33/6643ec5560f5d673dd301735_noiseTexture.png'); to the canvas
  4. add keyframes to translate the position of the perlin noise (-webkit-mask-position: 0px 0px)

And then the generated gradient acts to illuminate the masked holes. Please refer to the attachments I have!

Hope to get this solved!! Thank you! :-)


Here is my site: Read only Link

As well as the live site.

https://stunning-site-046dd0.webflow.io/

ATTACHMENTS:

Figma Demo - Album on Imgur (Figma Demo & Diagram)

Will note.

That also using CSS will allow more flexibility in changing the size of the Hero section (SVG will stretch etc).

Also can change the speed at which the noise slides underneath the mask through CSS.