How to create overlay with transparent shapes (circles in example)

[akoysor (Koysor Abdul)]

Hi all,

Would greatly appreciate if someone can explain how to achieve this:

Garbett Design

An overlay with transparent circles and that once scrolls out of view, the site scrolls as normal.

Here is my current attempt but i know it’s wrong. The background on the first section is ‘fixed’ which would mean it doesnt scroll up once the overlay is scrolled out of view.

https://preview.webflow.com/preview/infogr8?preview=90a8e43fd6fe074f6859e6d2a4b92f07

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[garymichael1313 (G.J.)]

Hey, there are a number of ways you could do this But I would suggest an transparent SVG… from Photoshop, AI, Affinity, Inkscape or any other program. Because man, adding “how many rows of circle divs” that would take? I don’t think using divs is logical. Go with a large SVG inside a div, fully covered, animate it up, and you’re done.