Looks and presets

Appearance is three independent axes, so you are never stuck with a fixed skin:

Axis	Option	Controls
Palette	theme	Colours
Land rendering	landStyle	How landmasses are drawn
Decoration	orbits, stars, graticule, shade	What surrounds them

A preset bundles all three into a name. Your own options always win over it.

The ten presets

Click a tile: the preview above it switches to that preset.

createGlobe(canvas, { preset: "hologram" });
globe.setPreset("neon");
globe.setOptions({ preset: "neon" });   // identical: a bare preset expands

setPreset() returns every key the new preset does not set back to its default, so switching from blueprint to atlas cannot leave stray orbit rings behind. Passing preset to setOptions() or to createGlobe() does the same expansion, and any keys you pass alongside it still win.

Land styles

Loading globe…

Value	Look
"fill" (default)	Solid land with a border stroke
"dots"	Halftone dot matrix
"outline"	Line art, near-transparent fill
"glow"	Neon stroke with a bloom
"none"	No land at all: for texture or media backgrounds

:::note How the dot matrix is built The land is rasterised once into an off-screen bitmap, then a grid is sampled against it. That makes changing dotSpacing cheap and lets the whole matrix draw in a single fill(). There is a polygon-testing fallback for environments with no canvas, such as SSR. :::

Orbit rings

orbits takes a count from 0 to 6, or explicit ring specs. They are real great circles, so they pass behind the globe as it turns rather than floating on top.

createGlobe(canvas, {
  orbits: [
    { inclination: 25, phase: 0, radius: 1.14, speed: 0.6, color: "#7dd3fc" },
    { inclination: 62, phase: 90, radius: 1.24, speed: -0.4 },
  ],
});

Field	Meaning
inclination	Tilt in degrees
phase	Starting rotation in degrees
radius	Multiple of the globe radius
speed	Degrees per second; negative counter-rotates
color, width	Stroke

Themes

Nine palettes ship: atlas, midnight, mono, hologram, neon, blueprint, aurora, noir and political.

Override any subset by passing an object: missing keys fall back to atlas:

createGlobe(canvas, {
  theme: {
    ocean: ["#0f172a", "#020617"],
    land: "#334155",
    marker: "#f97316",
    arc: "#22d3ee",
  },
});

Following the OS

theme: "auto";   // midnight in dark mode, atlas in light

Following your design tokens

theme: "css";

Reads --geo-* custom properties off the canvas element, so the globe inherits your brand automatically:

#globe {
  --geo-land: #334155;
  --geo-ocean-from: #0f172a;
  --geo-ocean-to: #020617;
  --geo-marker: #f97316;
  --geo-arc: #22d3ee;
}

Every theme key has a matching property in dash-case. ocean is the exception, split into --geo-ocean-from and --geo-ocean-to.

See the full theme key list.

Mixing freely

Any theme composes with any style. This is midnight with a dot matrix and three rings: not a preset, just three options:

Loading globe…