Achievement Badge

Vertical achievement card with an SVG medal, giant task count and share cue — swap name, count, labels and the lime accent.

Type: Image
Format: Instagram Story · 9:16
Orientation: Portrait

Variables

Open in editor

Free template · opens in the editor, no account required.

Customize Achievement Badge

Achievement Badge is a ready-to-render App personalization image design formatted for Instagram Story · 9:16 and support for variables. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

12 variables: Every value below is a variable you can override — send them in the variables field of the render request (or edit them in the editor) to generate on-brand versions at scale.

eyebrowText

ACHIEVEMENT UNLOCKED

bigNumberText

unitText

TASKS DONE

headlineText

Nice work,

userNameText

Jordan

captionText

Ten down and counting. Momentum looks good on you — keep the finish lines coming.

shareCueText

SHARE YOUR WIN

brandText

zvid

accentColor

#C6F24E

accent2Color

#8B7CF6

textPrimaryColor

#F4F2FB

textMutedColor

#9E9AB8

The exact JSON payload

This is the full render config — POST it to the API, or open it in the editor to tweak.

Open in editor ↗

{
  "type": "image",
  "name": "img-app-achievement",
  "resolution": "instagram-story",
  "outputFormat": "png",
  "backgroundColor": "#0A0912",
  "variables": {
    "eyebrow": "ACHIEVEMENT UNLOCKED",
    "bigNumber": "10",
    "unit": "TASKS DONE",
    "headline": "Nice work,",
    "userName": "Jordan",
    "caption": "Ten down and counting. Momentum looks good on you — keep the finish lines coming.",
    "shareCue": "SHARE YOUR WIN",
    "brand": "zvid",
    "accent": "#C6F24E",
    "accent2": "#8B7CF6",
    "textPrimary": "#F4F2FB",
    "textMuted": "#9E9AB8"
  },
  "visuals": [
    {
      "type": "SVG",
      "width": 1080,
      "height": 1920,
      "position": "center-center",
      "track": 0,
      "svg": "<svg width='1080' height='1920' viewBox='0 0 1080 1920' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bg' x1='0' y1='0' x2='0.55' y2='1'><stop offset='0' stop-color='#1B1440'/><stop offset='0.52' stop-color='#0C0B1A'/><stop offset='1' stop-color='#08070E'/></linearGradient><radialGradient id='g1' cx='0.5' cy='0.16' r='0.72'><stop offset='0' stop-color='{{accent2}}' stop-opacity='0.55'/><stop offset='1' stop-color='{{accent2}}' stop-opacity='0'/></radialGradient><radialGradient id='g2' cx='0.86' cy='0.88' r='0.7'><stop offset='0' stop-color='{{accent}}' stop-opacity='0.2'/><stop offset='1' stop-color='{{accent}}' stop-opacity='0'/></radialGradient></defs><rect width='1080' height='1920' fill='url(#bg)'/><rect width='1080' height='1920' fill='url(#g1)'/><rect width='1080' height='1920' fill='url(#g2)'/><rect x='40' y='40' width='1000' height='1840' rx='46' fill='none' stroke='#FFFFFF' stroke-opacity='0.09' stroke-width='1.5'/></svg>"
    },
    {
      "type": "SVG",
      "x": 380,
      "y": 214,
      "width": 320,
      "height": 320,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='320' height='320' viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='coin' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='{{accent}}'/><stop offset='1' stop-color='{{accent2}}'/></linearGradient><radialGradient id='halo' cx='0.5' cy='0.5' r='0.5'><stop offset='0.6' stop-color='{{accent}}' stop-opacity='0'/><stop offset='1' stop-color='{{accent}}' stop-opacity='0.28'/></radialGradient></defs><circle cx='160' cy='160' r='150' fill='url(#halo)'/><circle cx='160' cy='160' r='104' fill='url(#coin)'/><circle cx='160' cy='160' r='104' fill='none' stroke='#0A0912' stroke-opacity='0.25' stroke-width='2'/><circle cx='160' cy='160' r='90' fill='none' stroke='#0A0912' stroke-opacity='0.35' stroke-width='2'/><polygon points='160,102 173,140 214,140.9 181,164 193,204 160,180 127,204 139,164 106,140.9 147,140' fill='#0A0912'/></svg>"
    },
    {
      "type": "SVG",
      "x": 310,
      "y": 578,
      "width": 460,
      "height": 58,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='460' height='58' viewBox='0 0 460 58' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='458' height='56' rx='28' fill='{{accent2}}' fill-opacity='0.12' stroke='{{accent2}}' stroke-opacity='0.55' stroke-width='1.4'/><circle cx='42' cy='29' r='5' fill='{{accent}}'/><text x='230' y='37' font-family='Space Grotesk, Arial' font-size='21' font-weight='600' letter-spacing='4' fill='#D8D3F2' text-anchor='middle'>{{eyebrow}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 90,
      "y": 640,
      "width": 900,
      "anchor": "top-left",
      "track": 5,
      "text": "{{bigNumber}}",
      "style": {
        "fontFamily": "Sora",
        "fontSize": "340px",
        "fontWeight": "800",
        "letterSpacing": "-0.03em",
        "lineHeight": "1",
        "color": "{{accent}}",
        "textAlign": "center"
      }
    },
    {
      "type": "TEXT",
      "x": 90,
      "y": 1006,
      "width": 900,
      "anchor": "top-left",
      "track": 5,
      "text": "{{unit}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "40px",
        "fontWeight": "600",
        "letterSpacing": "0.42em",
        "color": "{{textPrimary}}",
        "textAlign": "center"
      }
    },
    {
      "type": "SVG",
      "x": 390,
      "y": 1116,
      "width": 300,
      "height": 2,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='300' height='2' viewBox='0 0 300 2' xmlns='http://www.w3.org/2000/svg'><rect width='300' height='1' fill='#FFFFFF' fill-opacity='0.14'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 90,
      "y": 1176,
      "width": 900,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Sora"
      },
      "html": "<div style='text-align:center; font-size:60px; font-weight:700; letter-spacing:-0.01em; color:#F4F2FB;'>{{headline}} <span style='color:{{accent}};'>{{userName}}</span></div>"
    },
    {
      "type": "TEXT",
      "x": 190,
      "y": 1276,
      "width": 700,
      "anchor": "top-left",
      "track": 5,
      "text": "{{caption}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "28px",
        "fontWeight": "400",
        "lineHeight": "1.5",
        "color": "{{textMuted}}",
        "textAlign": "center"
      }
    },
    {
      "type": "SVG",
      "x": 330,
      "y": 1774,
      "width": 420,
      "height": 60,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='420' height='60' viewBox='0 0 420 60' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='418' height='58' rx='29' fill='#FFFFFF' fill-opacity='0.05' stroke='#FFFFFF' stroke-opacity='0.14' stroke-width='1'/><circle cx='40' cy='30' r='13' fill='{{accent}}'/><path d='M35 30 L46 30 M40 25 L40 35' stroke='#0A0912' stroke-width='2.4' stroke-linecap='round'/><text x='72' y='38' font-family='Space Grotesk, Arial' font-size='19' font-weight='600' letter-spacing='2.5' fill='#D8D3F2'>{{shareCue}}</text><text x='398' y='38' font-family='Sora, Arial' font-size='20' font-weight='700' fill='#FFFFFF' text-anchor='end'>{{brand}}</text></svg>"
    }
  ]
}