Globe animation: a spinning 3D globe for a website or video

<canvas id="globe" style="position:fixed;inset:0;width:100%;height:100%;background:#060b1a"></canvas>
<script>
const canvas = document.getElementById('globe')
const g = canvas.getContext('2d')
const TILT = 0.35, SWAY = 0.12 // tilt in radians, sway speed
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
let w, h, dpr
function size() {
  dpr = Math.min(devicePixelRatio, 2)
  w = canvas.width = innerWidth * dpr
  h = canvas.height = innerHeight * dpr
}
size(); addEventListener('resize', size)
const toXYZ = ([lat, lon]) => {
  const p = lat * Math.PI / 180, l = lon * Math.PI / 180
  return [Math.cos(p) * Math.sin(l), Math.sin(p), Math.cos(p) * Math.cos(l)]
}
// Dots in rings of latitude, about 3 degrees apart along each ring
const dots = []
for (let lat = -84; lat <= 84; lat += 6)
  for (let n = Math.round(120 * Math.cos(lat * Math.PI / 180)), i = 0; i < n; i++)
    dots.push(toXYZ([lat, (i / n) * 360]))
const HUB = toXYZ([51.5, -0.1]) // London, then New York, Lagos, Sao Paulo, Cairo, Moscow, Mumbai
const CITIES = [[40.7, -74], [6.5, 3.4], [-23.5, -46.6], [30, 31.2], [55.8, 37.6], [19.1, 72.9]].map(toXYZ)
// The great circle from a to b, lifted off the surface in the middle
function arc(a, b, steps = 64) {
  const d = Math.acos(a[0] * b[0] + a[1] * b[1] + a[2] * b[2]), lift = 0.04 + 0.3 * d / Math.PI
  return Array.from({ length: steps + 1 }, (_, i) => {
    const t = i / steps, k = (1 + lift * Math.sin(Math.PI * t)) / Math.sin(d)
    const s1 = Math.sin((1 - t) * d) * k, s2 = Math.sin(t * d) * k
    return [0, 1, 2].map(j => s1 * a[j] + s2 * b[j])
  })
}
const ARCS = CITIES.map(c => arc(HUB, c))
// Turn about the axis, then tip the north pole toward the viewer
function view(p, spin) {
  const x = p[0] * Math.cos(spin) + p[2] * Math.sin(spin), z = p[2] * Math.cos(spin) - p[0] * Math.sin(spin)
  return [x, p[1] * Math.cos(TILT) - z * Math.sin(TILT), p[1] * Math.sin(TILT) + z * Math.cos(TILT)]
}
const behind = q => q[2] < 0 && q[0] * q[0] + q[1] * q[1] < 1
function frame(now) {
  const t = now / 1000, spin = still ? -0.5 : -0.5 + Math.sin(t * SWAY) * 0.9
  const R = Math.min(w, h) * 0.36, cx = w / 2, cy = h / 2
  const at = q => [cx + q[0] * R, cy - q[1] * R]
  g.fillStyle = '#060b1a'; g.fillRect(0, 0, w, h)
  const halo = g.createRadialGradient(cx, cy, R * 0.98, cx, cy, R * 1.15)
  halo.addColorStop(0, 'rgba(79,141,255,0.3)'); halo.addColorStop(1, 'rgba(79,141,255,0)')
  g.fillStyle = halo; g.beginPath(); g.arc(cx, cy, R * 1.15, 0, 7); g.fill()
  g.fillStyle = '#0b1430'; g.beginPath(); g.arc(cx, cy, R, 0, 7); g.fill()
  g.fillStyle = '#9fc2ff' // dots on the far side are skipped: back-face culling
  for (const p of dots) {
    const q = view(p, spin)
    if (q[2] <= 0) continue
    const [x, y] = at(q), s = (0.6 + q[2] * 1.4) * dpr
    g.globalAlpha = 0.2 + 0.8 * q[2]; g.fillRect(x - s / 2, y - s / 2, s, s)
  }
  g.globalAlpha = 1; g.lineWidth = 1.6 * dpr; g.strokeStyle = g.fillStyle = '#ffb547'
  g.shadowColor = '#ffb547'; g.shadowBlur = 8 * dpr
  ARCS.forEach((pts, i) => {
    const ph = still ? 0.6 : (t / 4 + i / ARCS.length) % 1 // draw in, then retract
    const head = Math.round(Math.min(1, ph / 0.6) * 64), tail = Math.round(Math.max(0, (ph - 0.6) / 0.4) * 64)
    g.beginPath(); let pen = false
    for (let k = tail; k <= head; k++) {
      const q = view(pts[k], spin)
      if (behind(q)) { pen = false; continue }
      const [x, y] = at(q)
      pen ? g.lineTo(x, y) : g.moveTo(x, y); pen = true
    }
    g.stroke()
  })
  for (const c of [HUB, ...CITIES]) {
    const q = view(c, spin)
    if (q[2] > 0) { const [x, y] = at(q); g.beginPath(); g.arc(x, y, 3 * dpr, 0, 7); g.fill() }
  }
  g.shadowBlur = 0
  if (!still) requestAnimationFrame(frame)
}
requestAnimationFrame(frame)
</script>