<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300">
<!-- Background gradient -->
<defs>
<linearGradient id="background-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#1a1a2e" />
<stop offset="100%" stop-color="#16213e" />
</linearGradient>
<linearGradient id="cloud-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#4392F1" />
<stop offset="100%" stop-color="#0D6EFD" />
</linearGradient>
<linearGradient id="anthropic-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#DE3163" />
<stop offset="100%" stop-color="#C71585" />
</linearGradient>
<linearGradient id="openai-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#10A37F" />
<stop offset="100%" stop-color="#0D8A6F" />
</linearGradient>
</defs>
<!-- Background -->
<rect width="1200" height="300" fill="url(#background-gradient)" />
<!-- Logo circle with camera iris -->
<g transform="translate(190, 150)">
<circle cx="0" cy="0" r="100" fill="#2A2A45" stroke="#ffffff" stroke-width="4" />
<circle cx="0" cy="0" r="75" fill="#1F1F38" stroke="#ffffff" stroke-width="1" />
<circle cx="0" cy="0" r="50" fill="#141428" stroke="#ffffff" stroke-width="2" />
<circle cx="0" cy="0" r="25" fill="#0A0A14" stroke="#ffffff" stroke-width="3" />
<circle cx="0" cy="0" r="10" fill="#ffffff" />
<!-- Iris blades -->
<path d="M0,-75 L30,-30 L0,0 Z" fill="#3a3a5c" />
<path d="M0,-75 L-30,-30 L0,0 Z" fill="#3a3a5c" />
<path d="M75,0 L30,30 L0,0 Z" fill="#3a3a5c" />
<path d="M75,0 L30,-30 L0,0 Z" fill="#3a3a5c" />
<path d="M0,75 L-30,30 L0,0 Z" fill="#3a3a5c" />
<path d="M0,75 L30,30 L0,0 Z" fill="#3a3a5c" />
<path d="M-75,0 L-30,-30 L0,0 Z" fill="#3a3a5c" />
<path d="M-75,0 L-30,30 L0,0 Z" fill="#3a3a5c" />
</g>
<!-- Connector lines -->
<line x1="290" y1="150" x2="370" y2="150" stroke="#ffffff" stroke-width="3" />
<!-- Title text -->
<text x="600" y="110" font-family="Arial, sans-serif" font-weight="bold" font-size="50" fill="#ffffff" text-anchor="middle">MCP IMAGE RECOGNITION</text>
<!-- Subtitle text -->
<text x="600" y="160" font-family="Arial, sans-serif" font-size="25" fill="#aaaaaa" text-anchor="middle">Computer Vision for AI Assistants</text>
<!-- Provider logos -->
<g transform="translate(400, 220)">
<!-- Anthropic -->
<circle cx="0" cy="0" r="30" fill="url(#anthropic-gradient)" />
<text x="0" y="8" font-family="Arial, sans-serif" font-weight="bold" font-size="12" fill="#ffffff" text-anchor="middle">CLAUDE</text>
</g>
<g transform="translate(600, 220)">
<!-- OpenAI -->
<circle cx="0" cy="0" r="30" fill="url(#openai-gradient)" />
<text x="0" y="8" font-family="Arial, sans-serif" font-weight="bold" font-size="12" fill="#ffffff" text-anchor="middle">GPT</text>
</g>
<g transform="translate(800, 220)">
<!-- Cloudflare -->
<circle cx="0" cy="0" r="30" fill="url(#cloud-gradient)" />
<text x="0" y="8" font-family="Arial, sans-serif" font-weight="bold" font-size="12" fill="#ffffff" text-anchor="middle">LLAVA</text>
</g>
<!-- Connecting lines between logos -->
<line x1="430" y1="220" x2="570" y2="220" stroke="#ffffff" stroke-width="2" />
<line x1="630" y1="220" x2="770" y2="220" stroke="#ffffff" stroke-width="2" />
<!-- MCP Tag -->
<rect x="980" y="40" rx="15" ry="15" width="130" height="40" fill="#007BFF" />
<text x="1045" y="65" font-family="Arial, sans-serif" font-weight="bold" font-size="18" fill="#ffffff" text-anchor="middle">MCP SERVER</text>
</svg>
