I Built a Globe Where Every Country Is a Separate Piece You Can Pull Out

Most web globes are a picture wrapped around a sphere. You can spin them, and that's about it.

I wanted one where every country is a real object: its own plate, set into the ocean ball like a puzzle piece. So I built it. You can turn it any way, pull a country out of its socket, split it into its states, or break the whole map apart.

👉 Try it: mahmad.me/blocks/interactive/world-globe

It's all plain SVG and a bit of math, with no WebGL and no canvas. Here's the short version of how it works.

The idea

A normal globe is one image. Mine is about 170 separate shapes, each with its own top, walls, shadow and the empty socket it leaves behind. Because every country is its own object, it can move on its own while the rest of the world stays put.

1. The ball is a projection

The outlines come from Natural Earth and go through a d3-geo orthographic projection. When you drag, nothing in the picture moves: the globe rotates and every country is projected again.

2. Every country is its own plate

Click a country and it lifts out of the ball on its own spring. It leaves an empty socket behind, and a shadow falls on the ball underneath. Put it back and it settles into its socket instead of sinking through the ball.

3. SVG has no depth buffer

If you draw things in the wrong order, a country from the back of the globe shows through the front. So every frame the plates are sorted by how much they face you and drawn back to front.

4. Countries split into states and provinces

Pull out a big country like Canada, the US or India and it splits into its provinces or states, each one a plate with its name on it. That data is one small file per country, fetched only the first time you pull that country out.

5. Break the whole map apart

One button lifts every country out, starting with the side facing you, and another puts them all back. It's a good way to see how all the pieces fit together.

Play with it

On the globe you can:

• drag to turn it any way
• click a country to pull it out, and search for one by name
• split a country into its provinces, or break the whole map apart
• use the keyboard: arrows turn it, B breaks it, D splits a country, P puts everything back

👉 mahmad.me/blocks/interactive/world-globe

Break the map apart, then try to put it back together by hand. It's harder than it looks.

Country outlines and borders are from Natural Earth, which is public domain.