Change text color with mix-blend-mode when divs are overlapping

I have a circular div which follows my cursor. When this div overlaps some text on my page, I want the color of the text to change. I know this is possible with mix-blend-mode like in this Fiddle, but I just can’t get it to work. I tried backdrop-filter and different approaches with SVG but none of it will work. I’ve seen this effect on so many sites, but I just can’t figure it out myself.

I have never done this effect but I know there are many js libraries that let you implement alot of crazy animations, so you might want to look into that instead of pure js.

Oh and you will probably find better help on stack overflow for this.