[L] button on your keyboard for some mouse over action!
This was a test to see if CSS blend-modes have a effect on the WebGL rendered map form MapboxGL.js. And yes they do! The trick is to put an image right behind your map container and put a blend-mode on the image.
Of course it is limited to one blend-mode on the whole map! But leaving out a lot of layers and simply making a white map of the road structures and water bodies gives a pretty neat effect.
[L] on you keyboard to play around with some mouse over effects. It creates bubbles where your mouse moves. The bubbles have a different blend-mode with the map and background image and another blend-mode with themselves.
Blend-mode on the map:
Blend-mode on the bubbles:
Blend-mode between the bubbles:
This is all implemented with the CSS of the application.
Check the github repro for the code!