JSFiddle - React, Tailwind, and code Playground

by kzima

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="960"></svg>

CSS

body {
      margin: 0;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: brown;
    }

JavaScript

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", "yellow")
          .attr("d", path(circle.center([140, 0])()));