---

title: I built a globe where every country is a separate piece you can pull out 🌍 published: true description: An interactive isometric globe built from plain SVG and d3-geo. Spin it, pull a country out of its socket, split it into its states, or break the whole map apart. tags: react, svg, webdev, showdev cover_image: https://mahmad.me/blocks/world-globe/og.png

canonical_url: <your Hashnode post URL, if you publish there first>

---

Hey everyone 👋

Most web globes are a texture 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.

{% embed https://mahmad.me/blocks/interactive/world-globe %}

It's all SVG and a bit of math, with no WebGL and no canvas.

What you can do 🎮

• Drag to turn the globe any way
• Click a country to pull it out of its socket
• Break the whole map apart with one button, then let it settle back

Pull out a big country like Canada, the US or Pakistan and it splits into its states or provinces, each one a plate with its name on it.

How it works 🛠️

1. The ball is a projection. Natural Earth's outlines go through a d3-geo orthographic projection. When you drag, nothing moves: the globe rotates and every country is projected again.
2. Each country is its own plate. It has a top, walls, a socket it leaves behind and a shadow, so it can lift out on its own spring while the others stay put.
3. SVG has no depth buffer. So every frame the plates are sorted by how much they face you, and drawn back to front.
4. Provinces load on demand. The split data is one small file per country, fetched only the first time you pull that country out.

Try it 🌐

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

Break the map apart, then try to put it back together by hand

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