DYNAMIC GITHUB SVG API

REAL GITHUB DATA.
ALIVE SVG
COMPONENTS.

Deploy one Next.js repository to Vercel, pass a GitHub username through query parameters, and embed the returned animated SVG directly in any README.

NO MOCK USER DATAGITHUB GRAPHQL + RESTSVG MOTIONVERCEL CDN
01 / LIVE COMPONENTSRENDERED FROM GITHUB
NEW IN V1.3

MORE THAN
A STATS CARD.

Each component has a distinct information purpose and visual composition. The examples below call this project’s own API and are not screenshots.

03

Contribution Timeline

/api/timeline
Contribution Timeline live GitHub SVG

Twelve real months of contributions rendered as an animated editorial skyline.

04

Repository Stack

/api/repos
Repository Stack live GitHub SVG

The user’s latest updated repositories with language, stars, forks and update time.

05

Year In Code

/api/year
Year In Code live GitHub SVG

A real 12-month recap with active days, strongest month, streak and primary language.

06

Contribution Pulse

/api/pulse
Contribution Pulse live GitHub SVG

A compact 52-week activity waveform designed for README headers and project pages.

02 / API CATALOG20 SVG ENDPOINTS
01

PROFILE SYSTEMS

/api/signal

Full editorial GitHub system panel

/api/stats

Core GitHub metrics

/api/radar

Normalized developer activity radar

/api/compare

Real user-versus-user comparison

/api/profile

Identity and public profile card

/api/terminal

Developer profile as a live terminal

02

ACTIVITY SYSTEMS

/api/pulse

52-week contribution waveform

/api/timeline

Twelve-month contribution skyline

/api/year

Year In Code recap

/api/activity

Contribution calendar trace

/api/streak

Current and longest streak index

/api/ticker

Animated live metrics ticker

03

CODE & REPOSITORIES

/api/languages

Language field and orbit layouts

/api/constellation

Animated language constellation

/api/repos

Recent repository stack

/api/repo

Single repository specimen

04

README UTILITIES

/api/badge

Compact real GitHub metric badge

/api/social

Social account published on GitHub

/api/button

Custom SVG action button

/api/status

Availability and project status

03 / LIVE BUILDERQUERY PARAMETERS → SVG
Generate a real GitHub componentEvery user metric is fetched from GitHub. Errors stay errors; no bundled profile or number fallback is used.
LIVE GITHUBSIGNAL / ALIVE
FETCHING GITHUB
Alive signal preview
https://your-domain.vercel.app/api/signal?username=luan-thnh&theme=alive&animate=true&cache_seconds=300&period=year
![Alive signal](https://your-domain.vercel.app/api/signal?username=luan-thnh&theme=alive&animate=true&cache_seconds=300&period=year)
<img src="https://your-domain.vercel.app/api/signal?username=luan-thnh&theme=alive&animate=true&cache_seconds=300&period=year" alt="Alive signal" />
04 / REQUEST MODELEVERY OPTION IS A PARAMETER
EXAMPLE REQUESTGET /api/constellation
?username=luan-thnh
&langs_count=8
&theme=alive
&animate=true
01VALIDATE02FETCH GITHUB03RENDER SVG04CACHE
username

GitHub user used as the real data source

theme

alive, paper, cobalt, ember or mono

animate

Native SVG animation; enabled by default

accent

Custom hexadecimal accent color

period

year or all for authored commits

cache_seconds

Vercel CDN freshness from 300 to 86400 seconds

width / height

Responsive output dimensions within safe limits

05 / DATA CONTRACTREAL OR EXPLICIT ERROR
01

NO BUNDLED USER DATA

The deployed service does not ship a sample profile, invented metric or fallback account.

02

PUBLIC GITHUB SOURCE

Profile, repository, contribution, language and social information comes from GitHub APIs.

03

HONEST FAILURE

Missing tokens, users, repositories or social accounts return a designed error SVG.

04

CONTROLLED FRESHNESS

Use cache_seconds to balance live updates with GitHub rate limits and Vercel performance.

06 / COMPACT COMPONENTSREADME DETAILS

LIVE METRIC TICKER

Live GitHub metric ticker

REAL CONTRIBUTION BADGE

Real GitHub contribution badge

GITHUB SOCIAL SIGNAL

Real GitHub social signal
07 / DEPLOYVERCEL / THREE STEPS
01

PUSH THE SOURCE

Create a GitHub repository and push this project.

02

SET THE TOKEN

Add GITHUB_TOKEN and the complete NEXT_PUBLIC_SITE_URL in Vercel.

03

EMBED THE SVG

Copy the generated Markdown or HTML from the builder into a README.

READY /https://your-domain.vercel.app/api/radar?username=luan-thnh&animate=true