Земля вращающаяся, svg, css3, html5

30.08.19 13:58:57 30.08.19 14:27:48 111
<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>