Arcs
Arcs connect two coordinates along the great circle: the actual shortest path across a sphere, which is why a New York to Tokyo route bends over the Arctic rather than running straight across the Pacific.
globe.setArcs([
{ from: { lat: 23.03, lon: 72.58 }, to: [-0.12, 51.5] },
{ from: [72.58, 23.03], to: [139.69, 35.68], color: "#f97316", duration: 3200 },
]);
Endpoints accept either { lat, lon } or [lon, lat].
Options per arc
| Field | Default | Meaning |
|---|---|---|
from, to | required | { lat, lon } or [lon, lat] |
color | theme arc | Stroke colour |
headColor | color | Colour of the travelling segment |
icon | Not set | Emoji drawn at the head instead of a dot |
width | 1.6 | Line width in px |
lift | arcLift (0.28) | Peak height as a fraction of the globe radius |
steps | 72 | Great-circle sample count |
duration | 2400 | Milliseconds for one travel cycle |
headLength | 0.22 | Length of the moving segment, 0…1 |
baseAlpha | 0.28 | Opacity of the static base line |
animate | true | false draws a plain static line |
A travelling icon
Give an arc an icon and the comet head becomes a glyph: a plane for routes, a parcel for
logistics, a bolt for events.
Height
lift bows the arc away from the surface. The projection is genuinely three-dimensional: a lifted
point stays visible slightly past the horizon, exactly as a real object at altitude would.
| Lift | Reads as |
|---|---|
0 | Drawn flat on the surface |
0.28 (default) | A confident flight path |
0.5+ | Dramatic, good for hero graphics |
Static arcs
For a printed or exported graphic, turn the animation off. The full line is drawn at solid opacity.
arcs: [{ from, to, animate: false, width: 2 }];
Arcs also hold still automatically when the visitor prefers reduced motion.
On a flat map
Arcs follow the same great circle in map mode, so they curve. This preserves the spherical route on a flat projection. Paths that cross the antimeridian are split cleanly rather than streaking back across the world.
Performance
Sample points are cached per arc object, so keep your arc array stable between frames rather than rebuilding it inline. If you regenerate arcs on every render the cache misses every time and the great circle is recomputed.
// Good: build once, pass the same array
const arcs = routes.map(toArc);
globe.setArcs(arcs);