assets/merit-badges.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 380" role="img" aria-label="Bonus quest merit badges — six earnable badges for the hackathon">
  <defs>
    <pattern id="paper-bq" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
      <rect width="200" height="200" fill="#f4ead5"/>
      <circle cx="20" cy="40" r="0.6" fill="#c9b88a" opacity="0.5"/>
      <circle cx="160" cy="20" r="0.5" fill="#c9b88a" opacity="0.4"/>
      <circle cx="80" cy="120" r="0.7" fill="#b8a574" opacity="0.4"/>
      <circle cx="180" cy="170" r="0.5" fill="#c9b88a" opacity="0.5"/>
      <circle cx="50" cy="180" r="0.4" fill="#b8a574" opacity="0.4"/>
    </pattern>

    <!-- a single badge backing template via use -->
    <g id="badge-back">
      <!-- outer scallop ring -->
      <g fill="#b84a3e" stroke="#2c4a2e" stroke-width="1.5">
        <path d="M0,-58 a58,58 0 1 1 -0.1,0 z M0,-58 l3,-6 l3,6 M58,0 l6,3 l-6,3 M0,58 l3,6 l3,-6 M-58,0 l-6,3 l-6,-3"
              transform="rotate(0)"/>
      </g>
      <!-- 12-point scallop -->
      <g fill="#b84a3e" stroke="#2c4a2e" stroke-width="1.5">
        <circle r="58"/>
      </g>
      <g fill="#b84a3e" stroke="#2c4a2e" stroke-width="1.4">
        <circle cx="0" cy="-58" r="6"/>
        <circle cx="29" cy="-50" r="6"/>
        <circle cx="50" cy="-29" r="6"/>
        <circle cx="58" cy="0" r="6"/>
        <circle cx="50" cy="29" r="6"/>
        <circle cx="29" cy="50" r="6"/>
        <circle cx="0" cy="58" r="6"/>
        <circle cx="-29" cy="50" r="6"/>
        <circle cx="-50" cy="29" r="6"/>
        <circle cx="-58" cy="0" r="6"/>
        <circle cx="-50" cy="-29" r="6"/>
        <circle cx="-29" cy="-50" r="6"/>
      </g>
      <!-- inner ring -->
      <circle r="48" fill="#f4ead5" stroke="#2c4a2e" stroke-width="1.5"/>
      <!-- inner inner ring -->
      <circle r="44" fill="none" stroke="#2c4a2e" stroke-width="0.8" stroke-dasharray="2 2"/>
    </g>
  </defs>

  <rect width="1200" height="380" fill="url(#paper-bq)"/>

  <!-- top eyebrow -->
  <g transform="translate(600,38)" text-anchor="middle">
    <line x1="-560" y1="-4" x2="-360" y2="-4" stroke="#2c4a2e" stroke-width="0.8"/>
    <line x1="560" y1="-4" x2="360" y2="-4" stroke="#2c4a2e" stroke-width="0.8"/>
    <circle cx="-360" cy="-4" r="2" fill="#2c4a2e"/>
    <circle cx="360" cy="-4" r="2" fill="#2c4a2e"/>
    <text y="2" font-family="Georgia, serif" font-size="14" letter-spacing="6" fill="#2c4a2e">EARN ALL SIX &#183; STACK THEM LIKE BADGES</text>
  </g>

  <!-- BADGE 1: Off the Grid (battery / unplugged) -->
  <g transform="translate(120,165)">
    <use href="#badge-back"/>
    <!-- battery icon -->
    <g transform="translate(0,-8)" stroke="#2c4a2e" stroke-width="2.2" fill="none" stroke-linecap="round">
      <rect x="-18" y="-12" width="36" height="22" fill="#d4a017" stroke-width="2"/>
      <rect x="18" y="-5" width="4" height="8" fill="#2c4a2e"/>
      <rect x="-15" y="-9" width="6" height="16" fill="#2c4a2e" opacity="0.7" stroke="none"/>
      <!-- lightning -->
      <path d="M-2,-6 l-4,8 l4,0 l-2,8" stroke="#2c4a2e" stroke-width="2" fill="none" stroke-linejoin="round"/>
    </g>
    <text x="0" y="92" text-anchor="middle" font-family="Georgia, serif" font-size="11" font-weight="700" fill="#2c4a2e" letter-spacing="2">OFF THE GRID</text>
  </g>

  <!-- BADGE 2: Well-Tuned (bullseye) -->
  <g transform="translate(310,165)">
    <use href="#badge-back"/>
    <g transform="translate(0,-8)">
      <circle cx="0" cy="0" r="22" fill="#f4ead5" stroke="#2c4a2e" stroke-width="2"/>
      <circle cx="0" cy="0" r="16" fill="#b84a3e" stroke="#2c4a2e" stroke-width="1.5"/>
      <circle cx="0" cy="0" r="10" fill="#f4ead5" stroke="#2c4a2e" stroke-width="1.5"/>
      <circle cx="0" cy="0" r="4" fill="#2c4a2e"/>
      <!-- arrow -->
      <line x1="-30" y1="-30" x2="-3" y2="-3" stroke="#2c4a2e" stroke-width="2.2" stroke-linecap="round"/>
      <path d="M-30,-30 l5,1 l-1,-5 z" fill="#2c4a2e"/>
      <path d="M-3,-3 l3,-7 l-7,3 z" fill="#d4a017" stroke="#2c4a2e" stroke-width="1.2"/>
    </g>
    <text x="0" y="92" text-anchor="middle" font-family="Georgia, serif" font-size="11" font-weight="700" fill="#2c4a2e" letter-spacing="2">WELL-TUNED</text>
  </g>

  <!-- BADGE 3: Off-Brand (paintbrush + palette) -->
  <g transform="translate(500,165)">
    <use href="#badge-back"/>
    <g transform="translate(0,-8)">
      <!-- palette -->
      <ellipse cx="-4" cy="2" rx="22" ry="16" fill="#d4a017" stroke="#2c4a2e" stroke-width="2"/>
      <circle cx="-12" cy="-5" r="3" fill="#b84a3e" stroke="#2c4a2e" stroke-width="1"/>
      <circle cx="-4" cy="-9" r="3" fill="#2c4a2e"/>
      <circle cx="6" cy="-6" r="3" fill="#4a6f2c" stroke="#2c4a2e" stroke-width="1"/>
      <circle cx="-12" cy="6" r="3" fill="#f4ead5" stroke="#2c4a2e" stroke-width="1"/>
      <!-- thumb hole -->
      <ellipse cx="14" cy="6" rx="5" ry="4" fill="#f4ead5" stroke="#2c4a2e" stroke-width="1.5"/>
      <!-- brush -->
      <line x1="6" y1="-22" x2="22" y2="-6" stroke="#6b4423" stroke-width="3" stroke-linecap="round"/>
      <path d="M2,-26 l-4,4 l8,8 l4,-4 z" fill="#b84a3e" stroke="#2c4a2e" stroke-width="1.4"/>
    </g>
    <text x="0" y="92" text-anchor="middle" font-family="Georgia, serif" font-size="11" font-weight="700" fill="#2c4a2e" letter-spacing="2">OFF-BRAND</text>
  </g>

  <!-- BADGE 4: Llama ChamPion (llama silhouette) -->
  <g transform="translate(690,165)">
    <use href="#badge-back"/>
    <g transform="translate(0,-4)">
      <!-- llama body -->
      <path d="M-16,8 q-2,-12 8,-14 l16,0 q4,0 4,-4 l0,-12 q0,-4 4,-4 l4,0 q4,0 4,4 l0,8 q0,4 4,4 q6,0 8,4 l0,18 q-2,4 -6,4 l-30,0 q-4,0 -4,4 l0,4 q0,2 -2,2 l-2,0 q-2,0 -2,-2 l0,-6 q0,-2 -2,-2 l-2,0 q-2,0 -2,2 l0,6 q0,2 -2,2 l-2,0 q-2,0 -2,-2 l0,-12 q0,-2 4,-4 z" fill="#6b4423" stroke="#2c4a2e" stroke-width="1.8" stroke-linejoin="round"/>
      <!-- ear -->
      <path d="M22,-26 l3,-6 l3,6 z" fill="#6b4423" stroke="#2c4a2e" stroke-width="1.5"/>
      <!-- eye -->
      <circle cx="30" cy="-18" r="1.4" fill="#f4ead5"/>
      <!-- mouth -->
      <line x1="34" y1="-10" x2="38" y2="-10" stroke="#f4ead5" stroke-width="1"/>
      <!-- tail tuft -->
      <path d="M-16,2 q-4,-2 -2,-6" stroke="#2c4a2e" stroke-width="1.4" fill="none"/>
    </g>
    <text x="0" y="92" text-anchor="middle" font-family="Georgia, serif" font-size="11" font-weight="700" fill="#2c4a2e" letter-spacing="2">LLAMA CHAMPION</text>
  </g>

  <!-- BADGE 5: Sharing is Caring (radio waves / signal) -->
  <g transform="translate(880,165)">
    <use href="#badge-back"/>
    <g transform="translate(0,-4)">
      <!-- center dot -->
      <circle cx="0" cy="6" r="3" fill="#2c4a2e"/>
      <!-- radio waves -->
      <g fill="none" stroke="#2c4a2e" stroke-width="2" stroke-linecap="round">
        <path d="M-10,0 a14,14 0 0 1 20,0"/>
        <path d="M-18,-6 a22,22 0 0 1 36,0"/>
        <path d="M-26,-12 a30,30 0 0 1 52,0"/>
      </g>
      <!-- little stars -->
      <g fill="#d4a017" stroke="#2c4a2e" stroke-width="0.6">
        <path d="M-22,-22 l1.2,3 l3,1.2 l-3,1.2 l-1.2,3 l-1.2,-3 l-3,-1.2 l3,-1.2 z"/>
        <path d="M22,-22 l1.2,3 l3,1.2 l-3,1.2 l-1.2,3 l-1.2,-3 l-3,-1.2 l3,-1.2 z"/>
      </g>
    </g>
    <text x="0" y="92" text-anchor="middle" font-family="Georgia, serif" font-size="11" font-weight="700" fill="#2c4a2e" letter-spacing="2">SHARING IS CARING</text>
  </g>

  <!-- BADGE 6: Field Notes (notebook + pencil) -->
  <g transform="translate(1070,165)">
    <use href="#badge-back"/>
    <g transform="translate(0,-4)">
      <!-- notebook -->
      <rect x="-18" y="-22" width="32" height="40" fill="#f4ead5" stroke="#2c4a2e" stroke-width="2"/>
      <!-- spine binding -->
      <rect x="-22" y="-22" width="6" height="40" fill="#b84a3e" stroke="#2c4a2e" stroke-width="1.5"/>
      <!-- spiral binding holes -->
      <g fill="#2c4a2e">
        <circle cx="-19" cy="-15" r="1"/>
        <circle cx="-19" cy="-7" r="1"/>
        <circle cx="-19" cy="1" r="1"/>
        <circle cx="-19" cy="9" r="1"/>
      </g>
      <!-- text lines -->
      <g stroke="#2c4a2e" stroke-width="0.8" opacity="0.7">
        <line x1="-12" y1="-14" x2="9" y2="-14"/>
        <line x1="-12" y1="-7" x2="9" y2="-7"/>
        <line x1="-12" y1="0" x2="6" y2="0"/>
        <line x1="-12" y1="7" x2="9" y2="7"/>
      </g>
      <!-- pencil -->
      <g transform="translate(16,-20) rotate(35)">
        <rect x="0" y="-2" width="22" height="4" fill="#d4a017" stroke="#2c4a2e" stroke-width="1.2"/>
        <path d="M22,-2 l4,2 l-4,2 z" fill="#2c4a2e"/>
        <rect x="-3" y="-2" width="3" height="4" fill="#b84a3e" stroke="#2c4a2e" stroke-width="1.2"/>
      </g>
    </g>
    <text x="0" y="92" text-anchor="middle" font-family="Georgia, serif" font-size="11" font-weight="700" fill="#2c4a2e" letter-spacing="2">FIELD NOTES</text>
  </g>

  <!-- bottom rule -->
  <g transform="translate(600,355)" text-anchor="middle">
    <line x1="-440" y1="-4" x2="-220" y2="-4" stroke="#2c4a2e" stroke-width="0.8"/>
    <line x1="440" y1="-4" x2="220" y2="-4" stroke="#2c4a2e" stroke-width="0.8"/>
    <text y="2" font-family="Georgia, serif" font-size="11" font-style="italic" letter-spacing="3" fill="#2c4a2e">none required &#183; each one bumps you up the leaderboard</text>
  </g>
</svg>