Inverted mouse cursor playground

I first learned about the practice of drawing a cursor by inverting the pixels behind it when a Retrocomputing StackExchange question popped up in StackExchange's "hot network questions" sidebar a year and a half ago. It's a cool visual effect; the cursor is a visible object but it isn't any one color in particular.

Windows has supported inverted cursors since time immemorial, but support on other systems is spotty to nonexistent. Through the magic of JavaScript and the CSS backdrop-filter property, I'm pleased to present a cross-platform inverted cursor playground. Check out how the inverted cursor looks against different backgrounds. If you're on a touchscreen and don't have a cursor, grab the square patch of invertedness in the page's top right corner.

Unfortunately, the cursor tends to get lost in black and white checkerboard patterns

and it's all but invisible against grays around #808080.

The inversion effect is typically implemented by XORing the RGB values of the pixels behind the cursor with #ffffff, inverting all of the bits. As some of the comments over on that StackExchange page point out, you should also (currently broken on Safari), which only flips the most significant bit. The cursor becomes visible against the two previously troublesome backgrounds, but it's still possible to find patterns that the cursor doesn't work well in front of, like the following #404040 and #c0c0c0 checkerboard pattern.

or XOR with my custom color (at time of writing, broken on Safari).


Published 2022-11-19

Previous: A UNIX command line utility for producing gibberish