Searching for a specific background clip/mask property

Hi, I've been searching for a specific property that would allow me to reveal a background behind some elements. Here's the tricky part, I have several divs that are following the user's mouse and are created/deleted dynamically (for an animation) I would like to be able to reveal a background hidden behind those divs (similar to a flashlight I suppose). I searched a bunch and stumbled upon masks which would be great except I have a pattern for a full screen background and as far as I understand masks need to be put on the parent (in this case the small divs which would ruin the background or force me to repeat the background inside those divs instead. If any of you know of a property that would help me with that it would be greatly appreciated. Many thanks! TLDR. I would like to reveal a background behind the "circles". Video of what the effect looks like for reference: https://www.youtube.com/shorts/VTw2cUVFl1c
Hyperplexed
YouTube
Interactive Liquid Effect - Vanilla JS
Watch as I show you how to create a sweet interactive liquid effect using just divs! Support the channel: https://ko-fi.com/hyperplexed (accepts PayPal, card, etc). CodePen: https://cdpn.io/abYjPXx Tools used: HTML, CSS, JavaScript Music Credits: When I Was Younger - StreamBeats - Lofi - Harris Heller Moderna Warfare - StreamBeats - EDM - H...
4 Replies
ἔρως
ἔρως2mo ago
you can use ::before or ::After those pseudo-elements support clip-masks, and you can control the hovering by targetting the parent element
MarkBoots
MarkBoots2mo ago
expanding on ἔρως something like this https://codepen.io/MarkBoots/pen/VwOXzEr
MarkBoots
MarkBoots2mo ago
No description
SkyZeLight
SkyZeLight5w ago
Thanks will try these alternatives next week