A dynamic SVG constellation of your GitHub profile, hosted on Vercel. It displays a space-like constellation that evolves automatically as you create more repositories, receive, and give stars.
I initially made this for myself but feel free to use it or even contribute if you're interested !
There are many cool Github readme stats out there, but I wanted something different, something representative rather evaluative.
The idea :
- Our knowledge is shaped by our work just like a constellation is shaped by its stars
- Distant ideas and knowledge enrich our work, just as distant stars illuminate the universe
- Blue being the hottest color, a hot repository (whether it's yours or one you've starred) will shine brighter and bluer as it gets starred
And what if you only have one repo? A single star may look small on its own, but it’s the first spark of a future constellation.
- Constellation stars - one per repository. Size and blueness reflect stargazer count, connected by a minimal spanning tree. If the longest edge would exceed 35% of the canvas width, the constellation is scaled in so every edge stays within that limit and the graph always remains connected. It is also scaled to fit inside the Constellation panel with padding, so nodes never touch the borders.
- Background stars - generated from your starred repos, colored by their popularity (blueness is affected by number of stars received).
- Links between nodes - colored by your 3 most-used languages using GitHub-assigned language colors.
Without cluterring :
- Represent followers and people you are following ?
| Parameter | Default | Description |
|---|---|---|
username |
required | Your GitHub username |
tuiColor |
318a80 |
Color of the TUI panel borders and text (hex, without the # prefix) |
fontFamily |
Consolas |
Font family for the TUI text (e.g. Arial, Courier New, monospace) |
fontSize |
14 |
Base font size in pixels (clamped to 8–40) |
showStargazers |
1 |
Show brightest stars and total stargazers section (0 to hide) |
showBorders |
1 |
Show TUI panel borders (0 to hide) |
Basic usage:
<img src="https://github-profile-constellation.vercel.app/?username=YourGithubUsernameHere"/>Custom TUI border color (also tints the panel text and cursor):
<img src="https://github-profile-constellation.vercel.app/?username=YourGithubUsernameHere&tuiColor=ff0000"/>Hide stargazer stats and TUI borders:
<img src="https://github-profile-constellation.vercel.app/?username=YourGithubUsernameHere&showStargazers=0&showBorders=0"/>Custom font and size:
<img src="https://github-profile-constellation.vercel.app/?username=YourGithubUsernameHere&fontFamily=monospace&fontSize=16"/>Install Vercel :
npm install -g vercel
Then run :
vercel dev --debug