Земля вращающаяся, svg, css3, html5
∘CSS 30.08.19 30.08.19 543
на главную сниппетов<![CDATA[<style>
body, svg {
overflow: hidden;
margin: 0;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<svg viewbox="0 0 600 600">
<circle r=250 cx=300 cy=300 fill=#91b9d2></circle>
<path fill=#e3edb8 d='M575,300 a275,275,0,0,0,-550,0 a275.5,275.5,0,1,1,550,0'></path>
<path fill=#34509a d='M575,300 a275,275,0,0,1,-550,0 a275.5,275.5,0,1,0,550,0'></path>
</svg>
<script>
const s = 600;
const svg = d3.select('svg');
const projection = d3.geoOrthographic().translate([s / 2, s / 2]);
const path = d3.geoPath().projection(projection);
const url = 'https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json';
fetch(url).then(r => r.json()).then(d => {
svg.selectAll("path.country")
.data(topojson.feature(d, d.objects.countries).features)
.enter()
.append("path")
.classed("country", true)
.style("stroke", "#888")
.style("fill", (d, i) => '#e3edb8');
})
requestAnimationFrame(draw)
function draw(t) {
projection.rotate([0.01 * t]);
svg.selectAll("path.country").attr("d", path);
requestAnimationFrame(draw)
};
</script>
]]> на главную сниппетов
