CSS Globe Studio
Explore three animated CSS and SVG globe styles. Change visual theme, speed, grid and signal layers with accessible motion controls.
Make the globe your own
These globes are decorative interfaces. Their land shapes, markers and routes do not represent a geographic map or live satellite observations. Your device’s reduced-motion preference is respected.
Three ways to give an interface a sense of orbit
The soft style combines shaded SVG continents, drifting land shapes, pulsing nodes and animated route dashes. The neon style adds a datagrid, signal field and counter-rotating rings. The playful style uses outlined land shapes and orbiting markers. Adjusting speed changes the duration of the animated layers together, while the grid and signal switches let you inspect each visual layer.
Motion pauses when this studio leaves the viewport or the page is hidden. The local pause button controls the studio; the page motion control and device preference also apply. Read the CSS globe guide for the design principles, or compare the approach with a Three.js satellite globe.