I have been trying to make a "hidden text" website of sorts.

I have managed to code a circular `div` that follows my mouse cursor and inverts every text underneath it using `background-filter` in CSS and Javascript:

```
let circle = document.getElementById('circle');

const onMouseMove = (e) => {
    circle.style.left = e.pageX + 'px';
    circle.style.top = e.pageY + 'px';
}

document.addEventListener('mousemove', onMouseMove);

```

The CSS for the #circle element is:

```
#circle {
    position: absolute;
    transform: translate(-50%,-50%);
    height: 80px;
    width: 80px;
    border-radius: 50%;
    box-shadow: 0px 0px 40px 10px white;
    pointer-events: none;
    backdrop-filter: invert(100%); 
    z-index: 100;
}

```

I have tried setting the text opacity to 5% and then setting `backdrop-filter: opacity(100%)` but that didn't work, unfortunately. How should I go about achieving this? I am open to any and all libraries and willing to follow any tutorial. Accessibility is not an issue at the moment as this is just an experiment for myself.