Hex the Moon
Regrets, dear reader, the moon and I are at it again.
This was originally published on .
The favicon on this humble site has been broken for a while now. This site is work in progress at all times, so I've let it linger. But looking at it tonight, I saw I'd mistaken actual words for a chain icon. "Undefined." Now, who am I to turn away from some debugging--but that's not why we're here. It's been so long since I wrote this script, I'd forgotten how the thing works. So, join me in the righteous act of documentation and the thankless task of controlling the moon, won't you?
I'd made the landscape on this early in 2021, and by fall, I decided it would be fun to change the phase of the moon on the fly. Enter SunCalc, handy library to get the phase of the moon, among other things, based on the date:
Using SunCalc's phase-to-words chart, I needed a set of phases, which consisted of a limit or range of phase percentages, and a string that describes the phase:
Then I walk through those
phases, asking if today's moon looks familiar. If it does, we have found the state of the moon.
Here we are. We know the state of the moon. The time has come to quietly change it both in the fav icon and the landscape on the bottom of the page.
For the fav icon, we have to create an SVG data URI that contains the emoji for the moon, then drop it into the
The CSS handles the presentation. The landscape will always show a full moon by default. In fact, if the moon's phase is equal to
1, the script makes no change to the landscape DOM. Otherwise, it finds its corresponding
g#phase mask--... and adds the
phase--active class to bring the mask's opacity up.
The shapes are rough estimates, they fit the style of the landscape that way. I'm pretty pleased with how the moon has turned out, from drawing it by hand to a little lunar calendar.
I was using the wrong property. Easy enough.