<script>
        showMoon();
function showMoon() {
    /* calculator */
    var day = Date.now() / 86400000;
    var referenceMoon = Date.UTC(2018, 0, 17, 2, 17, 0, 0);
    var refDay = referenceMoon / 86400000;
    var phase = (day - refDay) % 29.530588853;
    var phaseStr;
    var s=String;
    switch (Math.round(phase / 3.75)) {
    /* outcomes */
        case 0:case 8:phaseStr = "New Moon";break;
        case 1:phaseStr = "Waxing Crescent";break;
        case 2:phaseStr = "Waxing Quarter";break;
        case 3:phaseStr = "Waxing Gibbous";break;
        case 4:phaseStr = "Full Moon";break;
        case 5:phaseStr = "Waning Gibbous";break;
        case 6:phaseStr = "Waning Quarter";break;
        case 7:phaseStr = "Waning Crescent";break;
    }
    /* print */
    document.getElementById("demo").innerHTML = "phase: "+ phaseStr;

    var val=15;
    var moonCurve;
    /*
    moonCurve="M 50,0"+
        "a 40,50 0 0 0 0,100"+
        "a 30,50 0 0 1 0,-100";
    */
    var lf=Math.min(3-4*(phase/30),1);
    var lc=Math.abs(lf*12.5);
    var lb=(lf<0) ? "0" : "1";
    var rf=Math.min(3+4*((phase-30)/30),1);
    var rc=Math.abs(rf*12.5);
    var rb=(rf<0) ? "0" : "1";

    moonCurve="M 12.5,0 "+
        "a "+s(lc)+",12.5 0 0 "+lb+" 0,25 "+
        "a "+s(rc)+",12.5 0 0 "+rb+" 0,-25";

    document.getElementById("shapePath").setAttribute("d",moonCurve);
}

</script>