DEV Community

Cover image for I turned your GitHub contribution graph into a 3D city you can drive through
Rishabh Bhartiya
Rishabh Bhartiya

Posted on

I turned your GitHub contribution graph into a 3D city you can drive through

Every developer has that green squares grid on their GitHub profile. You stare at it, feel guilty about the gaps, and move on.

I wanted to make it feel alive. So I built GitCity.

What is it?

GitCity transforms your GitHub contribution history into an interactive isometric 3D city. Every day you commit, a building grows. The more commits, the taller the tower. Years of consistent coding turns into a proper skyline.

πŸ‘‰ Try it: gitcity.natrajx.in

The feature nobody expected

You can switch to simulation mode and drive a car through the city you built with your code.

It started as a joke. It's now the thing everyone screenshots.

Driving simulation

Features

  • πŸ™οΈ Isometric 3D city from your GitHub contributions
  • πŸš— Driveable city simulation mode
  • 🎨 6 themes β€” Matrix, Noir, Aurora, Ocean, Gold, Ice
  • πŸ“… Filter by year, month, or week
  • πŸ”— Embeddable SVG β€” one URL drops your skyline into any README
  • πŸ”“ No login needed β€” just enter any GitHub username
  • βœ… Free and open source

Add it to your README

![GitCity](https://gitcity.natrajx.in/api/svg?username=YOUR_USERNAME)
Enter fullscreen mode Exit fullscreen mode

Try it with torvalds to see what a legendary skyline looks like:
πŸ‘‰ gitcity.natrajx.in/torvalds

Tech stack

Built with React, Vite, and Three.js for the 3D rendering. Deployed on Vercel. GitHub contribution data fetched via the public API β€” no token required.

Open source

The full source is on GitHub β€” PRs and feedback welcome.
πŸ‘‰ github.com/rishabhbhartiya/GitCity

Would love to hear what your city looks like β€” drop your username in the comments!

Top comments (0)