Moon Phase

index.pug

div#moon
svg(style="position:fixed; top:100vh")
    defs
        filter#blob
            feGaussianBlur(in="SourceGraphic" stdDeviation="10" result="blur")
            feColorMatrix(in="blur" mode="matrix" values="1 0 0 0 0  0 2 0 0 0  0 0 1 0 0  0 0 0 10 -5" result="blob")
            feComposite(in="SourceGraphic" in2="blob" operator="atop")

playground.json

{
  "scripts": [
    "jquery"
  ],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  ]
}

script.ts

class MoonPhase {
    private static newMoonTime = 1577387237000
    private static moonPhaseTime = {days:29.530588853, milliseconds:2551442877}
    private static phases = ["New", "Waxing Crescent", "First Quarter", "Waxing Gibbous", "Full", "Waning Gibbous", "Third Quarter", "Waning Crescent"]
    private static direction = ["Waxing Moon", "Waning Moon"]
    public static getPercentage(date=Date.now()) {
        return ((date-this.newMoonTime)%this.moonPhaseTime.milliseconds)/this.moonPhaseTime.milliseconds
    }
    public static getBrightness(percentage) {
        return Math.sin(percentage*Math.PI)**2
    }
    public static getAge(percentage) {
        return this.moonPhaseTime.days * percentage
    }
    public static getPhaseName(percentage) {
        return this.phases[Math.round(percentage*8)%8]
    }
    public static getDirection(percentage) {
        return this.direction[Math.round(percentage*2)%2]
    }
    public static getDetails(date=Date.now()) {
        let percentage = this.getPercentage(date)
        return {
            percentage: percentage,
            brightness: this.getBrightness(percentage),
            age: this.getAge(percentage),
            phase: this.getPhaseName(percentage),
            direction: this.getDirection(percentage)
        }
    }
}
const setProperty = () => document.getElementById("moon").style.setProperty("--animation-progress"], MoonPhase.getPercentage())
setInterval(setProperty,60000);
setProperty();

style.scss

body {
    --background:#323133;
    display: grid;
    place-items: center;
    background: var(--background);
    height:100vh;
    #moon {
        --animation-progress:1;
        --moon-color:white;
        --size:50vmin;
        position: relative;
        border-radius: 100%;
        //background: white;
        filter:url("#blob");
        border:calc(var(--size)/2) solid var(--background);
        transform: rotate(45deg);
        animation: moon steps(1) 1s infinite calc(var(--animation-progress) * -1s);
        &:before {
            content: '';
            position: absolute;
            top:50%;
            left:50%;
            height:var(--size);
            width:15vmin;
            background: red;
            border-radius: 100%;
            transform: translate(-50%, -50%) rotate(-45deg);
            animation: middlecolor steps(1) 1s calc(var(--animation-progress) * -1s - .25s) infinite,  size linear .5s infinite calc(var(--animation-progress) * -1s);
            @keyframes middlecolor {
                0% {
                    background: var(--background);
                }
                50% {
                    background: var(--moon-color);
                }
            }
            @keyframes size {
                0%, 100% {
                    width:var(--size);
                }
                50% {
                    width:0vmin;
                }
            }
        }
        
        &, &:before {
            animation-play-state: paused;
            //animation-delay: calc(var(--animation-progress)*-1s);
        }
        @keyframes moon {
            0% {
                border-color: var(--moon-color) var(--moon-color) transparent transparent;
            }
            50% {
                border-color: transparent transparent var(--moon-color) var(--moon-color);
            }
        }
    }
}