Award Badges

Classic web badge designs for recipients to display on their sites. Copy the SVG code and paste it directly into your HTML!

Large Badge (200×200)

<a href="https://coolsiteoftheday.im" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#7c3aed;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#2563eb;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="200" height="200" rx="20" fill="url(#grad)"/>
  <g transform="translate(100, 60)">
    <path d="M0,-24 L4.776,-8.187 C5.097,-7.176 5.823,-6.451 6.834,-6.13 L22.647,-1.353 L6.834,3.424 C5.823,3.745 5.097,4.471 4.776,5.482 L0,21.295 L-4.776,5.482 C-5.097,4.471 -5.823,3.745 -6.834,3.424 L-22.647,-1.353 L-6.834,-6.13 C-5.823,-6.451 -5.097,-7.176 -4.776,-8.187 Z" fill="none" stroke="white" stroke-width="2"/>
  </g>
  <text x="100" y="115" font-family="Arial, sans-serif" font-size="18" font-weight="800" fill="white" text-anchor="middle">COOL SITE</text>
  <text x="100" y="135" font-family="Arial, sans-serif" font-size="18" font-weight="800" fill="white" text-anchor="middle">OF THE DAY</text>
  <text x="100" y="158" font-family="Courier New, monospace" font-size="12" font-weight="600" fill="rgba(255,255,255,0.8)" text-anchor="middle">Nov 26, 2025</text>
</svg>
</a>

Medium Badge (150×150)

<a href="https://coolsiteoftheday.im" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#7c3aed;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#2563eb;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="150" height="150" rx="16" fill="url(#grad)"/>
  <g transform="translate(75, 45)">
    <path d="M0,-18 L3.582,-6.14 C3.823,-5.382 4.368,-4.838 5.126,-4.597 L16.985,-1.015 L5.126,2.568 C4.368,2.809 3.823,3.353 3.582,4.111 L0,15.971 L-3.582,4.111 C-3.823,3.353 -4.368,2.809 -5.126,2.568 L-16.985,-1.015 L-5.126,-4.597 C-4.368,-4.838 -3.823,-5.382 -3.582,-6.14 Z" fill="none" stroke="white" stroke-width="2"/>
  </g>
  <text x="75" y="85" font-family="Arial, sans-serif" font-size="14" font-weight="800" fill="white" text-anchor="middle">COOL SITE</text>
  <text x="75" y="101" font-family="Arial, sans-serif" font-size="14" font-weight="800" fill="white" text-anchor="middle">OF THE DAY</text>
  <text x="75" y="118" font-family="Courier New, monospace" font-size="10" font-weight="600" fill="rgba(255,255,255,0.8)" text-anchor="middle">Nov 26, 2025</text>
</svg>
</a>

Small Badge (88×31 - Classic Web Badge)

<a href="https://coolsiteoftheday.im" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="88" height="31" viewBox="0 0 88 31">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#7c3aed;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#2563eb;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="88" height="31" rx="4" fill="url(#grad)"/>
  <rect x="1" y="1" width="86" height="29" rx="3" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="2"/>
  <g transform="translate(20, 15.5)">
    <path d="M0,-6 L1.194,-2.047 C1.274,-1.794 1.456,-1.612 1.709,-1.532 L5.662,-0.338 L1.709,0.856 C1.456,0.936 1.274,1.118 1.194,1.371 L0,5.324 L-1.194,1.371 C-1.274,1.118 -1.456,0.936 -1.709,0.856 L-5.662,-0.338 L-1.709,-1.532 C-1.456,-1.612 -1.274,-1.794 -1.194,-2.047 Z" fill="none" stroke="white" stroke-width="1.5"/>
  </g>
  <text x="38" y="13" font-family="Arial, sans-serif" font-size="8" font-weight="900" fill="white">COOL</text>
  <text x="38" y="23" font-family="Arial, sans-serif" font-size="8" font-weight="900" fill="white">SITE</text>
</svg>
</a>

Note: The SVG code is fully self-contained - just copy and paste into your HTML! No external files needed. Edit the date in the last <text> element to match your award date.