In “How To Avoid a Climate Disaster”, Bill Gates writes about kids, who're doing their homework by candle- or flashlight, either because of unstable electricity — or no electricity at all.

Imagine if you had to browse the web in a similar way — pretty annoying.

To show you just how annoying that is, I've made a fun little "flashlight-only"-website here (click on the flash and move it around):

We need to reduce carbon emissions and upgrade the living conditions for millions of people, so nobody have to study by candelight.

Quite a challenge.

How I Did It

I looked into ways of “cutting a hole” using clipping or masking, but ended up with something much simpler: a radial gradient.

body {
  background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 224, 0.77) var(--w), rgba(0, 0, 0, 0.97) calc(var(--w) + 1%));
}

The --w is the width of the inner, semi-transparent ring, while the --x and --y are coordinates, set by JavaScript:

function move(event) {
  document.body.style.setProperty('--x', parseInt((event.pageX / document.documentElement.offsetWidth) * 100, 10)+'%');
  document.body.style.setProperty('--y', parseInt((event.pageY / document.documentElement.offsetHeight) * 100, 10)+'%');
}

Thanks for reading!