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>
Copy Code
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>
Copy Code
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>
Copy Code
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.