JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<svg width="400px" height="400px" viewBox="0 0 600 600">
<!-- a (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ -->
    
    
<path class="moon" style="fill:blue;" d="m100,0                                               
                         a0,20 0 1,1 0,150
                         a20,20 0 1,0 0,-150" 
    />      
 <path class="moon" style="stroke:red;" d="m200,0                                               
                         a20,20 0 1,1 0,150
                         a0,20  0 1,1 0,-150" 
    />
  <path class="moon" d="m300,0                                               
                         a20,20 0 1,1 0,150
                         a2,20  0 1,1 0,-150" 
    />
  <path class="moon" style="fill:purple;" d="m500,0                                               
                         a10,20 0 1,1 0,150
                         a20,20 0 1,1 0,-150" 
    />
  <path class="moon" d="m200,200                                               
                         a1,20 0 1,0 0,150
                         a20,20 0 1,1 0,-150" 
    />  
 <path class="moon" style="fill:yellow;" d="m300,200 
                              a1,20 0 1,0 0,150
                              a20,20 0 1,0 0,-150" 
    />    
    
  <path class="moon" style="fill:green;" d="m500,200                                               
                         a20,20 0 1,1 0,150
                         a20,20 0 1,1 0,-150" 
    />  
  <path class="moon" style="fill:black;" d="m500,400                                               
                         a20,20 0 1,0 0,150
                         a20,20 0 1,0 0,-150" 
    />      
</svg>

</html>

CSS

.moon { fill:white; stroke:black; stroke-width:2 }

JavaScript

// http://stackoverflow.com/questions/11759992/calculating-jdayjulian-day-in-javascript
// http://jsfiddle.net/gkyYJ/
// http://stackoverflow.com/users/965051/adeneo
Date.prototype.getJulian = function() {
    return Math.floor((this / 86400000) - (this.getTimezoneOffset() / 1440) + 2440587.5);
};

// http://www.ben-daglish.net/moon.shtml


function moon_day(today) {
    var GetFrac = function(fr) {
        return (fr - Math.floor(fr));
    };
    var thisJD = today.getJulian();
    var year = today.getFullYear();
    var degToRad = 3.14159265 / 180;
    var K0, T, T2, T3, J0, F0, M0, M1, B1, oldJ;
    K0 = Math.floor((year - 1900) * 12.3685);
    T = (year - 1899.5) / 100;
    T2 = T * T;
    T3 = T * T * T;
    J0 = 2415020 + 29 * K0;
    F0 = 0.0001178 * T2 - 0.000000155 * T3 + (0.75933 + 0.53058868 * K0) - (0.000837 * T + 0.000335 * T2);
    M0 = 360 * (GetFrac(K0 * 0.08084821133)) + 359.2242 - 0.0000333 * T2 - 0.00000347 * T3;
    M1 = 360 * (GetFrac(K0 * 0.07171366128)) + 306.0253 + 0.0107306 * T2 + 0.00001236 * T3;
    B1 = 360 * (GetFrac(K0 * 0.08519585128)) + 21.2964 - (0.0016528 * T2) - (0.00000239 * T3);
    var phase = 0;
    var jday = 0;
    while (jday < thisJD) {
        var F = F0 + 1.530588 * phase;
        var M5 = (M0 + phase * 29.10535608) * degToRad;
        var M6 = (M1 + phase * 385.81691806) * degToRad;
        var B6 = (B1 + phase * 390.67050646) * degToRad;
        F -= 0.4068 * Math.sin(M6) + (0.1734 - 0.000393 * T) * Math.sin(M5);
        F += 0.0161 * Math.sin(2 * M6) + 0.0104 * Math.sin(2 * B6);
        F -= 0.0074 * Math.sin(M5 - M6) - 0.0051 * Math.sin(M5 + M6);
        F += 0.0021 * Math.sin(2 * M5) + 0.0010 * Math.sin(2 * B6 - M6);
        F += 0.5 / 1440;
        oldJ = jday;
        jday = J0 + 28 * phase + Math.floor(F);
        phase++;
    }

    // 29.53059 days per lunar month
    return (((thisJD - oldJ) / 29.53059));
}

console.log(moon_day(new Date()));