Skip to content

Instantly share code, notes, and snippets.

@curran
Last active June 8, 2019 00:24
Show Gist options
  • Save curran/843bc0b590678a83e1838e5d357a4cf6 to your computer and use it in GitHub Desktop.
Save curran/843bc0b590678a83e1838e5d357a4cf6 to your computer and use it in GitHub Desktop.
Moon
license: mit
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment