55 lines
2.9 KiB
XML
55 lines
2.9 KiB
XML
<svg width="800" height="400" viewBox="0 0 800 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="gradientBg" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#1a3a52;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#0a1e2e;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<rect width="800" height="400" fill="url(#gradientBg)"/>
|
|
|
|
<!-- Left side: Code/System visualization -->
|
|
<rect x="40" y="60" width="300" height="280" fill="none" stroke="#60a5fa" stroke-width="2" rx="8"/>
|
|
<text x="60" y="90" font-size="14" fill="#60a5fa" font-family="monospace">system.design</text>
|
|
<line x1="40" y1="100" x2="340" y2="100" stroke="#60a5fa" stroke-width="1" opacity="0.3"/>
|
|
|
|
<text x="60" y="130" font-size="12" fill="#34d399" font-family="monospace">class Infrastructure {</text>
|
|
<text x="80" y="155" font-size="12" fill="#e5e7eb" font-family="monospace">reliability: 99.9%</text>
|
|
<text x="80" y="180" font-size="12" fill="#e5e7eb" font-family="monospace">scalability: adaptive</text>
|
|
<text x="80" y="205" font-size="12" fill="#e5e7eb" font-family="monospace">maintenance: easy</text>
|
|
<text x="80" y="230" font-size="12" fill="#e5e7eb" font-family="monospace">security: enterprise</text>
|
|
<text x="60" y="260" font-size="12" fill="#34d399" font-family="monospace">}</text>
|
|
|
|
<!-- Right side: Technology stack -->
|
|
<g>
|
|
<!-- Database -->
|
|
<circle cx="580" cy="100" r="35" fill="none" stroke="#f59e0b" stroke-width="2"/>
|
|
<text x="565" y="110" font-size="18">📊</text>
|
|
<text x="520" y="155" font-size="13" fill="#f59e0b" text-anchor="middle">Database</text>
|
|
|
|
<!-- API -->
|
|
<circle cx="720" cy="100" r="35" fill="none" stroke="#ec4899" stroke-width="2"/>
|
|
<text x="705" y="110" font-size="18">🔌</text>
|
|
<text x="720" y="155" font-size="13" fill="#ec4899" text-anchor="middle">API</text>
|
|
|
|
<!-- Backend -->
|
|
<circle cx="580" cy="240" r="35" fill="none" stroke="#8b5cf6" stroke-width="2"/>
|
|
<text x="565" y="250" font-size="18">⚙️</text>
|
|
<text x="550" y="295" font-size="13" fill="#8b5cf6" text-anchor="middle">Backend</text>
|
|
|
|
<!-- Frontend -->
|
|
<circle cx="720" cy="240" r="35" fill="none" stroke="#34d399" stroke-width="2"/>
|
|
<text x="705" y="250" font-size="18">🎨</text>
|
|
<text x="720" y="295" font-size="13" fill="#34d399" text-anchor="middle">Frontend</text>
|
|
|
|
<!-- Connecting lines -->
|
|
<line x1="615" y1="120" x2="685" y2="120" stroke="#60a5fa" stroke-width="2" opacity="0.5"/>
|
|
<line x1="615" y1="260" x2="685" y2="260" stroke="#60a5fa" stroke-width="2" opacity="0.5"/>
|
|
<line x1="650" y1="135" x2="650" y2="225" stroke="#60a5fa" stroke-width="2" opacity="0.5"/>
|
|
</g>
|
|
|
|
<!-- Bottom text -->
|
|
<text x="400" y="370" font-size="14" fill="#a0aec0" text-anchor="middle">
|
|
設計から運用まで一貫したサポート
|
|
</text>
|
|
</svg> |
