{"id":"b332af14-0a9d-402d-aed6-eed9981f7ec0","name":"Starburst Achievement Badge","slug":"starburst-achievement-badge","category":"achievement-badges","description":"A square achievement badge with a glowing star medallion, level ribbon and achievement name — perfect for gamified apps, course completions and community milestones.","sample_params":{"hue":"45","issuer":"Acme Academy","level":"Gold","name":"100-Day Streak"},"spec":{"name":"starburst-achievement-badge","width":800,"height":800,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003cstyle\u003e\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml, body { width: 100%; height: 100%; }\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n.canvas {\n  position: relative;\n  width: 100vw; height: 100vh;\n  overflow: hidden;\n  display: flex; flex-direction: column;\n  align-items: center; justify-content: center;\n  background:\n    radial-gradient(circle at 50% 30%, hsl(var(--h), 45%, 22%) 0%, hsl(230, 35%, 10%) 62%, hsl(232, 40%, 7%) 100%);\n  color: #fff;\n  text-align: center;\n}\n.glow {\n  position: absolute; z-index: 0;\n  top: 60px; left: 50%; transform: translateX(-50%);\n  width: 520px; height: 520px; border-radius: 50%;\n  background: radial-gradient(circle, hsla(var(--h), 90%, 60%, 0.28) 0%, transparent 65%);\n}\n.medallion { position: relative; z-index: 1; width: 340px; height: 340px; margin-bottom: 44px; }\n.ring {\n  position: absolute; inset: 0; border-radius: 50%;\n  background: conic-gradient(from 210deg,\n    hsl(var(--h), 85%, 46%) 0%,\n    hsl(var(--h), 95%, 72%) 22%,\n    hsl(var(--h), 80%, 42%) 46%,\n    hsl(var(--h), 95%, 78%) 68%,\n    hsl(var(--h), 85%, 50%) 100%);\n  box-shadow:\n    0 24px 60px hsla(var(--h), 80%, 40%, 0.45),\n    inset 0 2px 6px rgba(255,255,255,0.55);\n}\n.ring-inner {\n  position: absolute; inset: 16px; border-radius: 50%;\n  background: linear-gradient(160deg, hsl(232, 30%, 15%) 0%, hsl(232, 36%, 9%) 100%);\n  box-shadow: inset 0 6px 22px rgba(0,0,0,0.7);\n}\n.star {\n  position: absolute; inset: 84px;\n  background: linear-gradient(180deg, hsl(var(--h), 95%, 76%) 0%, hsl(var(--h), 85%, 52%) 100%);\n  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n  filter: drop-shadow(0 8px 18px hsla(var(--h), 90%, 50%, 0.5));\n}\n.notch {\n  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);\n  padding: 8px 26px; border-radius: 999px;\n  background: linear-gradient(180deg, hsl(var(--h), 90%, 68%), hsl(var(--h), 85%, 48%));\n  color: hsl(232, 45%, 10%);\n  font-size: 21px; font-weight: 800;\n  letter-spacing: 0.14em; text-transform: uppercase;\n  box-shadow: 0 8px 22px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.6);\n  white-space: nowrap;\n}\n.content { position: relative; z-index: 1; max-width: 640px; padding: 0 40px; }\n.kicker {\n  font-size: 17px; font-weight: 700;\n  letter-spacing: 0.32em; text-transform: uppercase;\n  color: hsla(var(--h), 80%, 78%, 0.9);\n  margin-bottom: 14px;\n}\n.title {\n  font-size: 52px; font-weight: 800; line-height: 1.12;\n  letter-spacing: -0.015em;\n  overflow-wrap: break-word;\n  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;\n}\n.issuer {\n  margin-top: 26px;\n  display: inline-flex; align-items: center; gap: 14px;\n  font-size: 19px; font-weight: 600;\n  color: rgba(255,255,255,0.6);\n  letter-spacing: 0.04em;\n}\n.issuer::before, .issuer::after {\n  content: ''; display: block; width: 44px; height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35));\n}\n.issuer::after { transform: scaleX(-1); }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='canvas' style='--h: {{.hue}}'\u003e\n  \u003cdiv class='glow'\u003e\u003c/div\u003e\n  \u003cdiv class='medallion'\u003e\n    \u003cdiv class='ring'\u003e\u003c/div\u003e\n    \u003cdiv class='ring-inner'\u003e\u003c/div\u003e\n    \u003cdiv class='star'\u003e\u003c/div\u003e\n    \u003cdiv class='notch'\u003e{{.level}}\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class='content'\u003e\n    \u003cdiv class='kicker'\u003eAchievement unlocked\u003c/div\u003e\n    \u003ch1 class='title'\u003e{{.name}}\u003c/h1\u003e\n    \u003cdiv class='issuer'\u003e{{.issuer}}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"hue":{"type":"number","default":"45","maxLen":5,"description":"Accent hue 0-360 for the medallion and glow (45 = gold, 265 = purple, 150 = emerald)."},"issuer":{"type":"string","default":"media0","maxLen":40,"description":"Issuing product, community or organization shown under the name."},"level":{"type":"string","default":"Gold","maxLen":20,"description":"Level or tier shown on the medallion ribbon (e.g. Gold, Level 5)."},"name":{"type":"string","required":true,"maxLen":60,"description":"The achievement name shown as the badge headline."}}}}