create-icon.html•7.46 kB
<!DOCTYPE html>
<html>
<head>
<title>7pace MCP Icon Generator</title>
</head>
<body>
<h2>7pace MCP Server Icon</h2>
<div id="svg-container"></div>
<canvas id="canvas" width="512" height="512" style="border: 1px solid #ccc; margin: 20px 0;"></canvas>
<br>
<button onclick="downloadPNG()">Download PNG</button>
<button onclick="downloadSVG()">Download SVG</button>
<script>
const svgString = `<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradient definitions -->
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#0078d4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#00a0f2;stop-opacity:1" />
</linearGradient>
<linearGradient id="clockGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#f0f0f0;stop-opacity:1" />
</linearGradient>
<linearGradient id="accentGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00d4aa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#00b894;stop-opacity:1" />
</linearGradient>
<!-- Drop shadow filter -->
<filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000000" flood-opacity="0.2"/>
</filter>
</defs>
<!-- Background with rounded corners -->
<rect width="512" height="512" rx="64" ry="64" fill="url(#bgGradient)" />
<!-- Clock face background -->
<circle cx="256" cy="256" r="180" fill="url(#clockGradient)" filter="url(#dropShadow)" stroke="#e1e1e1" stroke-width="2"/>
<!-- Clock numbers (12, 3, 6, 9) -->
<text x="256" y="100" text-anchor="middle" font-family="Segoe UI, Arial, sans-serif" font-size="32" font-weight="bold" fill="#323130">12</text>
<text x="412" y="266" text-anchor="middle" font-family="Segoe UI, Arial, sans-serif" font-size="32" font-weight="bold" fill="#323130">3</text>
<text x="256" y="426" text-anchor="middle" font-family="Segoe UI, Arial, sans-serif" font-size="32" font-weight="bold" fill="#323130">6</text>
<text x="100" y="266" text-anchor="middle" font-family="Segoe UI, Arial, sans-serif" font-size="32" font-weight="bold" fill="#323130">9</text>
<!-- Hour markers -->
<g stroke="#605e5c" stroke-width="3">
<line x1="256" y1="86" x2="256" y2="106" />
<line x1="356" y1="110" x2="342" y2="124" />
<line x1="426" y1="256" x2="406" y2="256" />
<line x1="402" y1="356" x2="388" y2="342" />
<line x1="256" y1="426" x2="256" y2="406" />
<line x1="156" y1="402" x2="170" y2="388" />
<line x1="86" y1="256" x2="106" y2="256" />
<line x1="110" y1="156" x2="124" y2="170" />
</g>
<!-- Clock hands pointing to 7 (for 7pace) -->
<!-- Hour hand pointing to 7 -->
<line x1="256" y1="256" x2="200" y2="340" stroke="#0078d4" stroke-width="12" stroke-linecap="round" />
<!-- Minute hand pointing to 12 -->
<line x1="256" y1="256" x2="256" y2="130" stroke="#0078d4" stroke-width="8" stroke-linecap="round" />
<!-- Center dot -->
<circle cx="256" cy="256" r="16" fill="#0078d4" />
<circle cx="256" cy="256" r="8" fill="url(#accentGradient)" />
<!-- AI/MCP indicator - Neural network nodes in corner -->
<g opacity="0.8">
<!-- AI brain/network symbol -->
<circle cx="400" cy="112" r="8" fill="url(#accentGradient)" />
<circle cx="420" cy="132" r="6" fill="url(#accentGradient)" />
<circle cx="380" cy="132" r="6" fill="url(#accentGradient)" />
<circle cx="400" cy="152" r="8" fill="url(#accentGradient)" />
<!-- Connection lines -->
<line x1="400" y1="112" x2="420" y2="132" stroke="url(#accentGradient)" stroke-width="2" />
<line x1="400" y1="112" x2="380" y2="132" stroke="url(#accentGradient)" stroke-width="2" />
<line x1="420" y1="132" x2="400" y2="152" stroke="url(#accentGradient)" stroke-width="2" />
<line x1="380" y1="132" x2="400" y2="152" stroke="url(#accentGradient)" stroke-width="2" />
</g>
<!-- Azure DevOps indicator - Hexagon pattern -->
<g opacity="0.8">
<polygon points="112,380 132,370 152,380 152,400 132,410 112,400"
fill="none" stroke="url(#accentGradient)" stroke-width="3" />
<polygon points="122,390 142,385 142,395 122,395"
fill="url(#accentGradient)" />
</g>
<!-- 7pace branding - Subtle "7" in bottom right -->
<text x="420" y="460" text-anchor="middle" font-family="Segoe UI, Arial, sans-serif"
font-size="48" font-weight="bold" fill="rgba(255,255,255,0.3)">7</text>
<!-- Enterprise badge - Small crown icon -->
<g transform="translate(90, 90)" opacity="0.7">
<path d="M8 2 L12 6 L16 2 L18 8 L6 8 Z"
fill="url(#accentGradient)" stroke="white" stroke-width="1"/>
<circle cx="12" cy="4" r="1.5" fill="white"/>
</g>
</svg>`;
// Display SVG
document.getElementById('svg-container').innerHTML = svgString;
// Convert to PNG
function convertToPNG() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(svgBlob);
img.onload = function () {
ctx.clearRect(0, 0, 512, 512);
ctx.drawImage(img, 0, 0, 512, 512);
URL.revokeObjectURL(url);
};
img.src = url;
}
function downloadPNG() {
const canvas = document.getElementById('canvas');
const link = document.createElement('a');
link.download = '7pace-mcp-icon.png';
link.href = canvas.toDataURL('image/png');
link.click();
}
function downloadSVG() {
const blob = new Blob([svgString], { type: 'image/svg+xml' });
const link = document.createElement('a');
link.download = '7pace-mcp-icon.svg';
link.href = URL.createObjectURL(blob);
link.click();
}
// Auto-convert on load
window.onload = function () {
setTimeout(convertToPNG, 100);
};
</script>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
h2 {
color: #0078d4;
text-align: center;
}
#svg-container {
text-align: center;
margin: 20px 0;
}
#svg-container svg {
width: 256px;
height: 256px;
border: 1px solid #ccc;
border-radius: 8px;
}
button {
background: #0078d4;
color: white;
border: none;
padding: 12px 24px;
margin: 5px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
}
button:hover {
background: #106ebe;
}
canvas {
display: block;
margin: 20px auto;
}
</style>
</body>
</html>