diff --git a/package-lock.json b/package-lock.json
index acce894..33d6b41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
             "name": "geode-website",
             "version": "0.0.1",
             "dependencies": {
+                "@fontsource/poppins": "^5.2.7",
+                "@iconify-json/mdi": "^1.2.3",
                 "dayjs": "^1.11.11",
                 "redis": "^5.9.0",
                 "svelte-exmarkdown": "^5.0.2"
@@ -486,6 +488,24 @@
                 "node": ">=18"
             }
         },
+        "node_modules/@fontsource/poppins": {
+            "version": "5.2.7",
+            "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-5.2.7.tgz",
+            "integrity": "sha512-6uQyPmseo4FgI97WIhA4yWRlNaoLk4vSDK/PyRwdqqZb5zAEuc+Kunt8JTMcsHYUEGYBtN15SNkMajMdqUSUmg==",
+            "license": "OFL-1.1",
+            "funding": {
+                "url": "https://github.com/sponsors/ayuhito"
+            }
+        },
+        "node_modules/@iconify-json/mdi": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.3.tgz",
+            "integrity": "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@iconify/types": "*"
+            }
+        },
         "node_modules/@iconify/svelte": {
             "version": "5.1.0",
             "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-5.1.0.tgz",
@@ -506,7 +526,6 @@
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
             "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/@img/colour": {
diff --git a/package.json b/package.json
index 9e71926..31fdb45 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,8 @@
     },
     "type": "module",
     "dependencies": {
+        "@fontsource/poppins": "^5.2.7",
+        "@iconify-json/mdi": "^1.2.3",
         "dayjs": "^1.11.11",
         "redis": "^5.9.0",
         "svelte-exmarkdown": "^5.0.2"
diff --git a/src/lib/components/ModDetails.svelte b/src/lib/components/ModDetails.svelte
new file mode 100644
index 0000000..ea9b36e
--- /dev/null
+++ b/src/lib/components/ModDetails.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+    import Column from "$lib/components/Column.svelte";
+    import Icon from "$lib/components/Icon.svelte";
+    import Label from "$lib/components/Label.svelte";
+    import Row from "$lib/components/Row.svelte";
+    import VersionCards from "$lib/components/VersionCards.svelte";
+    import { serverTimestampToAgoString, serverTimestampToDateString, formatNumber, iconForTag } from "$lib";
+    import type { ServerGDVersion } from "$lib/api/models/mod-version";
+
+    interface Props {
+        modVersion?: string;
+        geodeVersion?: string;
+        gdVersion?: ServerGDVersion;
+        createdAt?: string;
+        updatedAt?: string;
+        downloads?: number;
+        tags?: string[];
+    }
+
+    let { modVersion, geodeVersion, gdVersion, createdAt, updatedAt, downloads, tags }: Props = $props();
+
+    const getTagDisplay = (tag: string) => tag.charAt(0).toUpperCase() + tag.slice(1);
+</script>
+
+<section>
+    <Column align="start" gap="small">
+        {#if modVersion}
+            <span class="card-info">
+                <Icon icon="version" />{modVersion}
+            </span>
+        {/if}
+
+        {#if downloads}
+            <span class="card-info">
+                <Icon icon="download" />{formatNumber(downloads)}
+            </span>
+        {/if}
+
+        {#if createdAt}
+            <span class="card-info" title={serverTimestampToDateString(createdAt)}>
+                <Icon icon="time" />{serverTimestampToAgoString(createdAt)}
+            </span>
+        {/if}
+
+        {#if updatedAt}
+            <span class="card-info" title={serverTimestampToDateString(updatedAt)}>
+                <Icon icon="update" />{serverTimestampToAgoString(updatedAt)}
+            </span>
+        {/if}
+
+        {#if geodeVersion}
+            <span class="card-info">
+                <Icon icon="geode" />{geodeVersion}
+            </span>
+        {/if}
+
+        {#if gdVersion}
+            <span class="card-info">
+                <VersionCards gd={gdVersion} />
+            </span>
+        {/if}
+
+        {#if tags && tags.length > 0}
+            <div class="mod-tags">
+                <Row wrap="wrap" gap="tiny" align="center" justify="start">
+                    {#each tags as tag}
+                        <Label icon={iconForTag(tag)} design="secondary">
+                            {getTagDisplay(tag)}
+                        </Label>
+                    {/each}
+                </Row>
+            </div>
+        {/if}
+    </Column>
+</section>
+
+<style lang="scss">
+    @use "$lib/styles/mod-details.scss" as *;
+
+    .mod-tags {
+        /* width chosen by fair dice roll */
+        max-width: 18rem;
+        padding-top: 0.25rem;
+    }
+
+    .card-info {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5em;
+
+        & > :global(.icon) {
+            --icon-size: 1.2em;
+            color: var(--secondary-300);
+            transition-duration: var(--transition-duration);
+        }
+    }
+</style>
diff --git a/src/lib/server/mod-badge-svg.ts b/src/lib/server/mod-badge-svg.ts
new file mode 100644
index 0000000..2a96893
--- /dev/null
+++ b/src/lib/server/mod-badge-svg.ts
@@ -0,0 +1,249 @@
+import { readFile } from "node:fs/promises";
+import gdIcon from "$lib/assets/gd-icon.json";
+import geodeIcon from "$lib/assets/geode-icon.json";
+import { formatNumber, icons, serverTimestampToAgoString, type KnownIcon } from "$lib";
+import type { ServerGDVersion } from "$lib/api/models/mod-version.js";
+import mdiIcons from "@iconify-json/mdi/icons.json";
+
+type SvgIconData = {
+    body: string;
+    width?: number;
+    height?: number;
+};
+
+type ModBadgeSvgInput = {
+    modId: string;
+    modVersion?: string;
+    geodeVersion?: string;
+    gdVersion?: ServerGDVersion;
+    createdAt?: string;
+    updatedAt?: string;
+    downloads?: number;
+    stats?: ModBadgeStatKey[];
+};
+
+export const MOD_BADGE_STAT_KEYS = [
+    "version",
+    "geode_version",
+    "gd_version",
+    "created_at",
+    "updated_at",
+    "downloads",
+] as const;
+
+export type ModBadgeStatKey = (typeof MOD_BADGE_STAT_KEYS)[number];
+
+type BadgeDescriptor = {
+    label: string;
+    value: string;
+    icon: KnownIcon;
+};
+
+const FONT_FAMILY = "Poppins Embedded";
+const BADGE_HEIGHT = 20;
+const BADGE_RADIUS = 3;
+const BADGE_ICON_SIZE = 12;
+const BADGE_TEXT_SIZE = 11;
+const BADGE_TEXT_WEIGHT = 600;
+const BADGE_LEFT_PADDING = 6;
+const BADGE_RIGHT_PADDING = 6;
+const BADGE_ICON_GAP = 4;
+
+const COLORS = {
+    background: "#0c0811",
+    outline: "rgba(205, 152, 189, 0.18)",
+    text: "#f2f2f2",
+    muted: "#cd98bd",
+    grayLabel: "#5f3d84",
+};
+
+const mdiIconSet = mdiIcons as { icons: Record<string, SvgIconData> };
+const customIcons: Partial<Record<KnownIcon, SvgIconData>> = {
+    gd: gdIcon,
+    geode: geodeIcon,
+};
+
+let embeddedFontsCssPromise: Promise<string> | null = null;
+
+const escapeXml = (value: string) =>
+    value
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&apos;");
+
+const loadEmbeddedFontsCss = async () => {
+    if (!embeddedFontsCssPromise) {
+        embeddedFontsCssPromise = (async () => {
+            const [regularFont, semiboldFont] = await Promise.all([
+                readFile(
+                    new URL(
+                        "../../../node_modules/@fontsource/poppins/files/poppins-latin-400-normal.woff2",
+                        import.meta.url,
+                    ),
+                ),
+                readFile(
+                    new URL(
+                        "../../../node_modules/@fontsource/poppins/files/poppins-latin-600-normal.woff2",
+                        import.meta.url,
+                    ),
+                ),
+            ]);
+
+            return [
+                `@font-face { font-family: "${FONT_FAMILY}"; src: url("data:font/woff2;base64,${regularFont.toString("base64")}") format("woff2"); font-style: normal; font-weight: 400; }`,
+                `@font-face { font-family: "${FONT_FAMILY}"; src: url("data:font/woff2;base64,${semiboldFont.toString("base64")}") format("woff2"); font-style: normal; font-weight: 600; }`,
+                `text { font-family: "${FONT_FAMILY}", Arial, sans-serif; }`,
+            ].join("\n");
+        })();
+    }
+
+    return embeddedFontsCssPromise;
+};
+
+const measureTextWidth = (text: string, fontSize: number, weight = 400) => {
+    return Math.ceil(text.length * fontSize * (weight >= 600 ? 0.61 : 0.56));
+};
+
+const getIconData = (icon: KnownIcon) => {
+    const customIcon = customIcons[icon];
+    if (customIcon) {
+        return customIcon;
+    }
+
+    const iconName = icons[icon];
+    return iconName.startsWith("mdi:") ? mdiIconSet.icons[iconName.slice("mdi:".length)] : undefined;
+};
+
+const renderIcon = (icon: KnownIcon, x: number, y: number, size: number, color: string) => {
+    const data = getIconData(icon);
+    if (!data) {
+        return "";
+    }
+
+    const width = data.width ?? 24;
+    const height = data.height ?? 24;
+    return `<g transform="translate(${x} ${y}) scale(${size / width} ${size / height})" style="color: ${color};">${data.body}</g>`;
+};
+
+const renderBadgeText = (
+    text: string,
+    x: number,
+    y: number,
+    { anchor = "start" as const, fill = COLORS.text }: { anchor?: "start" | "middle"; fill?: string } = {},
+) => {
+    const safeText = escapeXml(text);
+    return [
+        `<text x="${x}" y="${y + 1}" fill="#010101" fill-opacity="0.3" font-family="${FONT_FAMILY}, Arial, sans-serif" font-size="${BADGE_TEXT_SIZE}" font-weight="${BADGE_TEXT_WEIGHT}" dominant-baseline="middle" text-anchor="${anchor}">${safeText}</text>`,
+        `<text x="${x}" y="${y}" fill="${fill}" font-family="${FONT_FAMILY}, Arial, sans-serif" font-size="${BADGE_TEXT_SIZE}" font-weight="${BADGE_TEXT_WEIGHT}" dominant-baseline="middle" text-anchor="${anchor}">${safeText}</text>`,
+    ].join("");
+};
+
+const getSharedGDVersion = (gdVersion: ServerGDVersion) => {
+    const version = gdVersion.ios;
+    return version &&
+        [
+            gdVersion.android32,
+            gdVersion.android64,
+            gdVersion.ios,
+            gdVersion["mac-arm"],
+            gdVersion["mac-intel"],
+            gdVersion.win,
+        ].every((current) => current === version)
+        ? version
+        : null;
+};
+
+const formatGDVersionValue = (gdVersion: ServerGDVersion) => {
+    const sharedVersion = getSharedGDVersion(gdVersion);
+    if (sharedVersion) {
+        return sharedVersion;
+    }
+
+    const distinctVersions = [
+        gdVersion.win,
+        gdVersion["mac-arm"],
+        gdVersion["mac-intel"],
+        gdVersion.ios,
+        gdVersion.android64,
+        gdVersion.android32,
+    ].filter((version, index, versions): version is string => Boolean(version) && versions.indexOf(version) === index);
+
+    return distinctVersions.join(" / ");
+};
+
+const getBadgeDescriptor = (input: ModBadgeSvgInput, stat: ModBadgeStatKey): BadgeDescriptor | undefined => {
+    switch (stat) {
+        case "version":
+            return input.modVersion ? { label: "Version", value: input.modVersion, icon: "version" } : undefined;
+        case "geode_version":
+            return input.geodeVersion ? { label: "Geode", value: input.geodeVersion, icon: "geode" } : undefined;
+        case "gd_version":
+            return input.gdVersion ? { label: "GD", value: formatGDVersionValue(input.gdVersion), icon: "gd" } : undefined;
+        case "created_at":
+            return input.createdAt
+                ? {
+                      label: "Created",
+                      value: serverTimestampToAgoString(input.createdAt) ?? input.createdAt,
+                      icon: "time",
+                  }
+                : undefined;
+        case "updated_at":
+            return input.updatedAt
+                ? {
+                      label: "Updated",
+                      value: serverTimestampToAgoString(input.updatedAt) ?? input.updatedAt,
+                      icon: "update",
+                  }
+                : undefined;
+        case "downloads":
+            return input.downloads !== undefined
+                ? { label: "Downloads", value: formatNumber(input.downloads), icon: "download" }
+                : undefined;
+    }
+};
+
+export async function renderModBadgeSvg(input: ModBadgeSvgInput) {
+    const requestedStats = input.stats?.length ? input.stats : MOD_BADGE_STAT_KEYS;
+    const badge =
+        requestedStats.map((stat) => getBadgeDescriptor(input, stat)).find((stat) => stat !== undefined) ?? {
+            label: "Mod",
+            value: input.modId,
+            icon: "geode" as const,
+        };
+
+    const leftTextWidth = measureTextWidth(badge.label, BADGE_TEXT_SIZE, BADGE_TEXT_WEIGHT);
+    const rightTextWidth = measureTextWidth(badge.value, BADGE_TEXT_SIZE, BADGE_TEXT_WEIGHT);
+    const leftWidth =
+        BADGE_LEFT_PADDING * 2 + BADGE_ICON_SIZE + BADGE_ICON_GAP + leftTextWidth;
+    const rightWidth = Math.max(30, BADGE_RIGHT_PADDING * 2 + rightTextWidth);
+    const totalWidth = leftWidth + rightWidth;
+    const textY = BADGE_HEIGHT / 2;
+    const valueCenterX = leftWidth + rightWidth / 2;
+    const title = `${badge.label}: ${badge.value}`;
+
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="${totalWidth}" height="${BADGE_HEIGHT}" viewBox="0 0 ${totalWidth} ${BADGE_HEIGHT}" role="img" aria-labelledby="title">
+    <title id="title">${escapeXml(title)}</title>
+    <defs>
+        <linearGradient id="shine" x2="0" y2="100%">
+            <stop offset="0" stop-color="#fff" stop-opacity="0.1" />
+            <stop offset="1" stop-color="#fff" stop-opacity="0" />
+        </linearGradient>
+        <mask id="clip">
+            <rect width="${totalWidth}" height="${BADGE_HEIGHT}" rx="${BADGE_RADIUS}" fill="#fff" />
+        </mask>
+    </defs>
+    <style>${await loadEmbeddedFontsCss()}</style>
+    <g mask="url(#clip)">
+        <path fill="${COLORS.background}" d="M0 0h${leftWidth}v${BADGE_HEIGHT}H0z" />
+        <path fill="${COLORS.grayLabel}" d="M${leftWidth} 0h${rightWidth}v${BADGE_HEIGHT}H${leftWidth}z" />
+        <path fill="url(#shine)" d="M0 0h${totalWidth}v${BADGE_HEIGHT}H0z" />
+    </g>
+    <rect x="0.5" y="0.5" width="${totalWidth - 1}" height="${BADGE_HEIGHT - 1}" rx="${BADGE_RADIUS - 0.5}" fill="none" stroke="${COLORS.outline}" />
+    ${renderIcon(badge.icon, BADGE_LEFT_PADDING, (BADGE_HEIGHT - BADGE_ICON_SIZE) / 2, BADGE_ICON_SIZE, COLORS.muted)}
+    ${renderBadgeText(badge.label, BADGE_LEFT_PADDING + BADGE_ICON_SIZE + BADGE_ICON_GAP, textY)}
+    ${renderBadgeText(badge.value, valueCenterX, textY, { anchor: "middle" })}
+</svg>`;
+}
diff --git a/src/lib/styles/link.scss b/src/lib/styles/link.scss
new file mode 100644
index 0000000..604d1ef
--- /dev/null
+++ b/src/lib/styles/link.scss
@@ -0,0 +1,3 @@
+.color-link {
+    --link-color: var(--accent-300);
+}
diff --git a/src/lib/styles/mod-details.scss b/src/lib/styles/mod-details.scss
new file mode 100644
index 0000000..0d34e6d
--- /dev/null
+++ b/src/lib/styles/mod-details.scss
@@ -0,0 +1,6 @@
+section {
+    background-color: var(--background-950);
+    padding: 0.75rem;
+    // gap: .5rem;
+    border-radius: 0.5rem;
+}
diff --git a/src/routes/mods/[id]/+page.svelte b/src/routes/mods/[id]/+page.svelte
index dd7d4fe..19b5431 100644
--- a/src/routes/mods/[id]/+page.svelte
+++ b/src/routes/mods/[id]/+page.svelte
@@ -11,13 +11,10 @@
     import Tabs from "$lib/components/Tabs.svelte";
     import TabPage from "$lib/components/TabPage.svelte";
     import Link from "$lib/components/Link.svelte";
-    import Icon from "$lib/components/Icon.svelte";
     import Gap from "$lib/components/Gap.svelte";
-    import { serverTimestampToAgoString, serverTimestampToDateString, formatNumber, iconForTag } from "$lib";
     import Waves from "$lib/components/Waves.svelte";
     import Label from "$lib/components/Label.svelte";
     import InfoBox from "$lib/components/InfoBox.svelte";
-    import VersionCards from "$lib/components/VersionCards.svelte";
     import Pagination from "$lib/components/Pagination.svelte";
     import LoadingOverlay from "$lib/components/LoadingOverlay.svelte";
     import VersionCard from "$lib/components/VersionCard.svelte";
@@ -27,6 +24,7 @@
     import GeodeMarkdown from "$lib/components/GeodeMarkdown.svelte";
     import ModLogo from "$lib/components/ModLogo.svelte";
     import ModDevelopersList from "$lib/components/ModDevelopersList.svelte";
+    import ModDetails from "$lib/components/ModDetails.svelte";
 
     interface Props {
         data: PageData;
@@ -80,11 +78,6 @@
         searching = false;
     };
 
-    const getTagDisplay = (tag: string) => {
-        const foundTag = data.tags.find((x) => x.name == tag);
-        return foundTag ? foundTag.display_name : tag.charAt(0).toUpperCase() + tag.slice(1);
-    };
-
     let url_params = $derived(page.url.searchParams);
     let status = $derived(data.version_params.status ?? "accepted");
     let invalid_status = $derived(!verifyStatus(status));
@@ -393,7 +386,7 @@
                             </p>
 
                             {#if data.version.early_load || data.version.api}
-                                <Row align="center" justify="top" gap="small">
+                                <Row align="center" justify="start" gap="small">
                                     {#if data.version.early_load}
                                         <Label icon="time" design="accent-alt">Early Load</Label>
                                     {/if}
@@ -442,42 +435,14 @@
             </Tabs>
         </section>
         <aside>
-            <section>
-                <Column align="start" gap="small">
-                    <span class="card-info">
-                        <Icon icon="version" />{data.version.version}
-                    </span>
-                    <span class="card-info">
-                        <Icon icon="download" />{formatNumber(data.mod.download_count)}
-                    </span>
-                    <span class="card-info" title={serverTimestampToDateString(data.mod.created_at)}>
-                        <Icon icon="time" />{serverTimestampToAgoString(data.mod.created_at)}
-                    </span>
-                    <span class="card-info" title={serverTimestampToDateString(data.mod.updated_at)}>
-                        <Icon icon="update" />{serverTimestampToAgoString(data.mod.updated_at)}
-                    </span>
-                    <span class="card-info">
-                        <Icon icon="geode" />{data.version.geode}
-                    </span>
-                    {#if data.version}
-                        <span class="card-info">
-                            <VersionCards gd={data.version.gd} />
-                        </span>
-                    {/if}
-
-                    {#if data.mod.tags.length > 0}
-                        <div class="mod-tags">
-                            <Row wrap="wrap" gap="tiny" align="center" justify="top">
-                                {#each data.mod.tags as tag}
-                                    <Label icon={iconForTag(tag)} design="secondary">
-                                        {getTagDisplay(tag)}
-                                    </Label>
-                                {/each}
-                            </Row>
-                        </div>
-                    {/if}
-                </Column>
-            </section>
+            <ModDetails
+                modVersion={data.version.version}
+                geodeVersion={data.version.geode}
+                gdVersion={data.version?.gd}
+                createdAt={data.mod.created_at}
+                updatedAt={data.mod.updated_at}
+                downloads={data.mod.download_count}
+                tags={data.mod.tags} />
             <section>
                 <Column align="stretch" gap="small">
                     <Button href={data.version.download_link} icon="download" design="primary-filled">Download</Button>
@@ -544,6 +509,9 @@
 </div>
 
 <style lang="scss">
+    @use "$lib/styles/link.scss" as *;
+    @use "$lib/styles/mod-details.scss" as *;
+
     h2 {
         margin: 0;
     }
@@ -569,39 +537,11 @@
             margin: 0;
         }
     }
-    section {
-        background-color: var(--background-950);
-        padding: 0.75rem;
-        // gap: .5rem;
-        border-radius: 0.5rem;
-    }
     aside {
         display: flex;
         flex-direction: column;
         gap: var(--gap-small);
     }
-    .card-info {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 0.5em;
-
-        & > :global(.icon) {
-            --icon-size: 1.2em;
-            color: var(--secondary-300);
-            transition-duration: var(--transition-duration);
-        }
-    }
-
-    .mod-tags {
-        /* width chosen by fair dice roll */
-        max-width: 18rem;
-        padding-top: 0.25rem;
-    }
-
-    .color-link {
-        --link-color: var(--accent-300);
-    }
 
     .link-row {
         display: flex;
diff --git a/src/routes/mods/[id]/badge.svg/+server.ts b/src/routes/mods/[id]/badge.svg/+server.ts
new file mode 100644
index 0000000..47c4e21
--- /dev/null
+++ b/src/routes/mods/[id]/badge.svg/+server.ts
@@ -0,0 +1,126 @@
+import { createHash } from "node:crypto";
+import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
+import { MOD_BADGE_STAT_KEYS, renderModBadgeSvg, type ModBadgeStatKey } from "$lib/server/mod-badge-svg.js";
+import { load as loadModPage } from "../+page.server.js";
+import type { RequestHandler } from "./$types.js";
+import { tmpdir as getOSTmpDir } from "os";
+import { join as joinPath } from "path";
+
+const BADGE_CACHE_TTL_SECS = 5 * 60;
+const BADGE_CACHE_TTL_MS = BADGE_CACHE_TTL_SECS * 1_000;
+const BADGE_CACHE_CONTROL = `public, max-age=${BADGE_CACHE_TTL_SECS}, s-maxage=${BADGE_CACHE_TTL_SECS}, stale-while-revalidate=86400`;
+const BADGE_CACHE_DIR = joinPath(getOSTmpDir(), "mod-badges");
+
+const pendingBadgeSvgRequests = new Map<string, Promise<string>>();
+let badgeCacheDirReady: Promise<void> | null = null;
+
+function parseStatsParam(value: string | null): ModBadgeStatKey[] {
+    if (value === null) {
+        return [...MOD_BADGE_STAT_KEYS];
+    }
+
+    const validStats = new Set<ModBadgeStatKey>(MOD_BADGE_STAT_KEYS);
+    const seen = new Set<ModBadgeStatKey>();
+    const parsed: ModBadgeStatKey[] = [];
+
+    for (const rawStat of value.split(",")) {
+        const stat = rawStat.trim() as ModBadgeStatKey;
+        if (!validStats.has(stat) || seen.has(stat)) {
+            continue;
+        }
+
+        seen.add(stat);
+        parsed.push(stat);
+    }
+
+    return parsed;
+}
+
+function getBadgeCacheKey(modId: string, stats: ModBadgeStatKey[]) {
+    return `${modId}:${stats.join(",")}`;
+}
+
+function getBadgeCachePath(cacheKey: string) {
+    const digest = createHash("sha1").update(cacheKey).digest("hex");
+    return joinPath(BADGE_CACHE_DIR, `${digest}.svg`);
+}
+
+function ensureBadgeCacheDir() {
+    badgeCacheDirReady ??= mkdir(BADGE_CACHE_DIR, { recursive: true }).then(() => undefined);
+    return badgeCacheDirReady;
+}
+
+async function readCachedBadgeSvg(cacheKey: string, now = Date.now()) {
+    const cachePath = getBadgeCachePath(cacheKey);
+
+    try {
+        const fileStats = await stat(cachePath);
+        if (now - fileStats.mtimeMs > BADGE_CACHE_TTL_MS) {
+            return undefined;
+        }
+
+        return await readFile(cachePath, "utf8");
+    } catch (error) {
+        if (typeof error === "object" && error !== null && "code" in error && error.code === "ENOENT") {
+            return undefined;
+        }
+
+        throw error;
+    }
+}
+
+async function writeCachedBadgeSvg(cacheKey: string, svg: string) {
+    await ensureBadgeCacheDir();
+    await writeFile(getBadgeCachePath(cacheKey), svg, "utf8");
+}
+
+function createBadgeResponse(svg: string, modId: string) {
+    return new Response(svg, {
+        headers: {
+            "cache-control": BADGE_CACHE_CONTROL,
+            "content-disposition": `inline; filename="${modId}-badge.svg"`,
+            "content-type": "image/svg+xml; charset=utf-8",
+        },
+    });
+}
+
+export const GET: RequestHandler = async (event) => {
+    const stats = parseStatsParam(event.url.searchParams.get("stats"));
+    const cacheKey = getBadgeCacheKey(event.params.id, stats);
+    const cachedSvg = await readCachedBadgeSvg(cacheKey);
+    if (cachedSvg) {
+        return createBadgeResponse(cachedSvg, event.params.id);
+    }
+
+    let pending = pendingBadgeSvgRequests.get(cacheKey);
+
+    if (!pending) {
+        pending = (async () => {
+            const data = await loadModPage(event as unknown as Parameters<typeof loadModPage>[0]);
+
+            if (!data || !("mod" in data) || !("version" in data)) {
+                throw new Error("Failed to load mod badge data.");
+            }
+
+            const svg = await renderModBadgeSvg({
+                modId: data.mod.id,
+                modVersion: data.version.version,
+                geodeVersion: data.version.geode,
+                gdVersion: data.version.gd,
+                createdAt: data.mod.created_at,
+                updatedAt: data.mod.updated_at,
+                downloads: data.mod.download_count,
+                stats,
+            });
+
+            await writeCachedBadgeSvg(cacheKey, svg);
+            return svg;
+        })().finally(() => {
+            pendingBadgeSvgRequests.delete(cacheKey);
+        });
+
+        pendingBadgeSvgRequests.set(cacheKey, pending);
+    }
+
+    return createBadgeResponse(await pending, event.params.id);
+};