Avengers: Doomsday hits theaters on December 18, 2026. That's about five weeks from now, and I figured the best use of the wait was to build something Marvel-flavored instead of just rewatching trailers.

So I made hex-badges: hexagon README badges with 10 Avengers-inspired color themes, a glow effect, and live GitHub stats. Yes, one of the themes is a green-and-silver Latveria badge. Doom deserves a README badge.

Before the technical stuff, I have a question for the Marvel fans on DEV: what are you building (or have you built) with the Doomsday hype? A themed portfolio, a countdown widget, a Discord bot, a game, a dumb little CLI? Drop it in the comments. I would love to see them. More on that at the end.

All the themes as single hexagons

What you get

Two badge styles, 10 themes, and every badge is a plain SVG served from a URL:

![stars](https://hex-badges.vercel.app/github/stars/facebook/react?theme=stark-forge) ![license](https://hex-badges.vercel.app/github/license/facebook/react?theme=asgard&style=wide)
  • Single hexagon: label over value, with a glow and a themed pattern.
  • Elongated: a two-part badge with a pointed hexagon outline, closer to a classic badge.

The elongated style in all 10 themes

GitHub metrics: stars, forks, watchers, open issues, open PRs, latest release, latest tag, last commit, license, contributors, language and repo size. There is also a custom endpoint, /api/badge?label=build&message=passing, for anything else.

How it works

The whole thing is three small pieces, and none of them needs a dependency.

1. An SVG renderer. A badge is just a string. For the single hexagon, the six corner points come from a bit of trigonometry:

const ring = (rad) => [0, 1, 2, 3, 4, 5].map((k) => { const a = ((-90 + 60 * k) * Math.PI) / 180; return `${cx + rad * Math.cos(a)},${cy + rad * Math.sin(a)}`; }).join(' '); // <polygon points="${ring(r)}" .../>

The tricky part of any badge generator is text width. Real services measure font metrics. I estimate it from character count, which is good enough for a short label:

const textWidth = (s, size) => Math.ceil(String(s).length * size * 0.62);

For long values the hexagon is capped at a maximum size and the font shrinks to fit.

2. Serverless functions on Vercel. Each endpoint reads query params and returns SVG with caching headers:

res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8'); res.setHeader('Cache-Control', 'public, max-age=300, s-maxage=300'); res.status(200).send(svg);

A vercel.json rewrite turns /github/stars/owner/repo into a function call, so the URLs stay short.

3. GitHub data. Each metric is a small function that calls the GitHub REST API and returns a message. Counts are shortened (12,437 becomes 12.4k), and errors become badges too, such as "not found" or "rate limited", instead of a broken image.

Making the themes feel right

Each theme is a handful of values: two gradient pairs, text colors, an outline color and a glow color. Gradients give the badges a metallic look, so "silver" and "gold" actually read as metal.

The glow is the fun part. SVG has no simple glow property, so it is a filter that floods the shape's outline with a color, blurs it, and merges it under the original:

<filter id="glow" x="-40%" y="-40%" width="180%" height="180%"> <feFlood flood-color="#37ff86" result="f"/> <feComposite in="f" in2="SourceAlpha" operator="in" result="c"/> <feGaussianBlur in="c" stdDeviation="4" result="b"/> <feMerge> <feMergeNode in="b"/><feMergeNode in="b"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter>

On top of that, each single hexagon gets a pattern clipped to its shape with a clipPath: arc-reactor rings, armor plates and rivets, lightning, a woven lattice, stars and stripes, cracks, a targeting reticle, a spider web, a sling-ring mandala, and cosmic dust with six colored stones. I kept patterns away from the text area so values stay readable.

One deliberate choice: I used generic motifs and my own theme names, not logos or official symbols. These badges are inspired by the colors, and they are not affiliated with Marvel or Disney.

Lessons learned

  • Escape everything. Labels come from the URL and go into an SVG, so any user-supplied text is escaped before it is inserted. Otherwise a crafted URL can inject markup.
  • Validate the repo param. My first regex accepted ../evil as an owner/repo, which would have sent a path-traversal-style request to the GitHub API. A test caught it. Now . and .. segments are rejected.
  • Cache hard. Badges get requested constantly. CDN cache headers keep latency low and API usage small.
  • Plan for rate limits. GitHub allows only 60 unauthenticated requests per hour per IP, and serverless platforms share IPs. A read-only token with no scopes raises that to 5,000 per hour. Issue and PR counts use the search API, which has its own tighter limit, so caching matters even more there.
  • Glow needs a dark background. On GitHub's dark theme the glow looks great. On white it fades to a soft halo, which still looks fine but is more subtle.

Deploy your own

  1. Fork the repo and import it into Vercel. There is no build step.
  2. Create a fine-grained GitHub token with public repositories, read-only access and no permissions.
  3. Add it in Vercel as the GITHUB_TOKEN environment variable and redeploy.

That's it. The landing page at / has a builder where you pick a theme and copy the Markdown.

What's next

More metrics (npm versions and downloads are next on my list), more themes, and a light-background glow variant. Theme requests are open, and that's where I need you.

Your turn: let's make this a Doomsday watercooler

Pick any of these and answer in the comments. One line is plenty.

  1. Show me your Marvel (or Doomsday) project. Link the repo, the site, or just describe it, however rough or silly. Hype projects count.
  2. Which theme is your favorite? Stark Forge, Latveria, Asgard, Wakanda, Star Shield, Gamma Smash, Red Room, Web Slinger, Mystic Arts or Infinity.
  3. Which theme should I add next? X-Men, Fantastic Four, Loki, Scarlet Witch, something from the DC side? Give me a color combo and a pattern idea and I'll try to build it.
  4. Are you Team Avengers or Team Doom? Defend your answer. Bonus points if you argue it using only README badges.
  5. Post your README. Add a badge to one of your repos and share a screenshot. I'll reply to as many as I can.

And if you are not a Marvel person, tell me about the side project you are most excited about right now. This is a watercooler post, so all fun projects are welcome.

Disclaimer: this is a fan project and is not affiliated with or endorsed by Marvel or Disney. Theme names are my own, and the patterns are generic motifs, not official logos.