Moon by curran

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin: 0;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: black;
    }
  </style>
</head>

<body>
  <svg width="960" height="960"></svg>
  <script>
    
    var svg = d3.select("svg"),
        circle = d3.geoCircle(),
        projection = d3.geoOrthographic()
        path = d3.geoPath()
          .projection(projection)
        moonBackground = svg.append("path")
          .attr("fill", "#2b281b")
          .attr("d", path(circle())),
        moon = svg.append("path")
          .attr("fill", "#f7f6f2");
    
    d3.timer(function (t){
      moon.attr("d", path(circle.center([t / 60, 0])()));
    }); 

  </script>
</body>