How the Contribution Constellation Works

Every developer has a contribution graph, that grid of green squares on your GitHub profile. It's functional, but it's the same for everyone. I wanted something that felt more personal, something that turned my actual coding activity into art. So I built the Contribution Constellation: a dynamic starmap that renders your GitHub contributions as a night sky.

Here's a look at how your activity shapes the stars.

Streaks become constellations

The algorithm groups consecutive active days into streaks. If you committed on Monday, Tuesday, and Wednesday, skipped Thursday, then committed Friday and Saturday, that produces two streaks: one of length 3 and one of length 2.

Each streak of 2 or more days becomes a constellation. Single isolated active days become lone stars, white, unconnected, scattered across the sky. Days with zero activity don't appear at all; they're the darkness between stars.

This means your coding rhythm directly shapes the sky. A week-long grind produces a large, branching constellation. A quick two-day hotfix is a small pair of connected stars. The pattern of work and rest over three months creates a sky that's uniquely yours.

Star brightness denotes intensity

Not all stars are equal. The number of contributions on a given day determines the star's size and glow:

• 1 to 2 contributions: small, subtle star with a tight glow
• 3 to 5 contributions: medium star, slightly brighter
• 6 to 9 contributions: large star with a noticeable glow halo
• 10+ contributions: the brightest point in the sky with a large core and wide glow radius

Color palettes identify constellations

Each constellation cycles through six color palettes: blue, purple, green, gold, pink, and orange. The constellation lines and glow colors match, so you can visually distinguish separate constellations even when they're close together.

Lone stars (isolated single-day contributions) are always white, neutral and unaffiliated with any constellation.

Deployment

The whole thing is a single Next.js API route that returns an SVG image.

The source code for the constellation generator lives in my profile repo here. Feel free to fork it and point it at your own username, your sky will look nothing like mine.