Ryan Malloy
86070e4688
22 pages across Diataxis quadrants (start / how-to / reference / explain). Custom amber-on-charcoal theme, wire-dump hero animation, Supported Systems footer badge. caddy-docker-proxy deployment with prod + dev profiles, Makefile with prod/dev/down/logs/local targets.
67 lines
4.3 KiB
XML
67 lines
4.3 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 75" height="100%" width="100%">
|
|
<!-- Gradient Definitions -->
|
|
<defs>
|
|
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#60a5fa"></stop>
|
|
<stop offset="50%" stop-color="#3b82f6"></stop>
|
|
<stop offset="100%" stop-color="#2563eb"></stop>
|
|
</linearGradient>
|
|
<linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#93c5fd"></stop>
|
|
<stop offset="50%" stop-color="#60a5fa"></stop>
|
|
<stop offset="100%" stop-color="#3b82f6"></stop>
|
|
</linearGradient>
|
|
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#2563eb"></stop>
|
|
<stop offset="50%" stop-color="#60a5fa"></stop>
|
|
<stop offset="100%" stop-color="#2563eb"></stop>
|
|
</linearGradient>
|
|
<pattern id="circuitPattern" patternUnits="userSpaceOnUse" width="12" height="45" patternTransform="scale(1)">
|
|
<rect width="12" height="45" fill="url(#gradient1)"></rect>
|
|
<path d="M2,5 h8 M2,5 v5 M10,5 v10 M5,15 h5 M5,15 v10 M3,25 h7 M7,25 v10 M3,35 h4" stroke="#dbeafe" stroke-width="0.5" fill="none" opacity="0.7"></path>
|
|
<circle cx="2" cy="5" r="1" fill="#dbeafe" opacity="0.7"></circle>
|
|
<circle cx="10" cy="5" r="1" fill="#dbeafe" opacity="0.7"></circle>
|
|
<circle cx="5" cy="15" r="1" fill="#dbeafe" opacity="0.7"></circle>
|
|
<circle cx="3" cy="25" r="1" fill="#dbeafe" opacity="0.7"></circle>
|
|
<circle cx="7" cy="35" r="1" fill="#dbeafe" opacity="0.7"></circle>
|
|
</pattern>
|
|
<pattern id="binaryPattern" patternUnits="userSpaceOnUse" width="12" height="35" patternTransform="scale(1)">
|
|
<rect width="12" height="35" fill="#2563eb"></rect>
|
|
<text x="3" y="8" font-family="monospace" font-size="3" fill="#FFFFFF" opacity="0.5">10</text>
|
|
<text x="3" y="14" font-family="monospace" font-size="3" fill="#FFFFFF" opacity="0.5">01</text>
|
|
<text x="3" y="20" font-family="monospace" font-size="3" fill="#FFFFFF" opacity="0.5">11</text>
|
|
<text x="3" y="26" font-family="monospace" font-size="3" fill="#FFFFFF" opacity="0.5">00</text>
|
|
<text x="3" y="32" font-family="monospace" font-size="3" fill="#FFFFFF" opacity="0.5">10</text>
|
|
</pattern>
|
|
<pattern id="punchCardPattern" patternUnits="userSpaceOnUse" width="12" height="45" patternTransform="scale(1)">
|
|
<rect width="12" height="45" fill="#3b82f6"></rect>
|
|
<path d="M0,5 h12 M0,10 h12 M0,15 h12 M0,20 h12 M0,25 h12 M0,30 h12 M0,35 h12 M0,40 h12" stroke="#93c5fd" stroke-width="0.2" fill="none"></path>
|
|
<circle cx="3" cy="7" r="1" fill="#1e3a8a" opacity="0.9"></circle>
|
|
<circle cx="9" cy="7" r="1" fill="#1e3a8a" opacity="0.9"></circle>
|
|
<circle cx="6" cy="12" r="1" fill="#1e3a8a" opacity="0.9"></circle>
|
|
<circle cx="3" cy="17" r="1" fill="#1e3a8a" opacity="0.9"></circle>
|
|
<circle cx="9" cy="22" r="1" fill="#1e3a8a" opacity="0.9"></circle>
|
|
<circle cx="6" cy="27" r="1" fill="#1e3a8a" opacity="0.9"></circle>
|
|
<circle cx="3" cy="32" r="1" fill="#1e3a8a" opacity="0.9"></circle>
|
|
<circle cx="9" cy="37" r="1" fill="#1e3a8a" opacity="0.9"></circle>
|
|
</pattern>
|
|
</defs>
|
|
<!-- Flow lines behind bars -->
|
|
<g opacity="0.3">
|
|
<path d="M6,50 C20,40 40,55 48,35 C56,50 75,30 90,55" stroke="url(#flowGradient)" stroke-width="1" fill="none"></path>
|
|
<path d="M6,60 C30,50 50,40 70,55 C80,45 90,60 90,60" stroke="url(#flowGradient)" stroke-width="1" fill="none"></path>
|
|
</g>
|
|
<!-- Bar chart graphic - the "towers" -->
|
|
<g>
|
|
<rect x="0" y="45" width="12" height="25" rx="1" ry="1" fill="url(#binaryPattern)"></rect>
|
|
<rect x="14" y="35" width="12" height="35" rx="1" ry="1" fill="#2563eb"></rect>
|
|
<rect x="28" y="25" width="12" height="45" rx="1" ry="1" fill="url(#circuitPattern)"></rect>
|
|
<rect x="42" y="20" width="12" height="50" rx="1" ry="1" fill="url(#gradient2)"></rect>
|
|
<rect x="56" y="25" width="12" height="45" rx="1" ry="1" fill="url(#punchCardPattern)"></rect>
|
|
<rect x="70" y="35" width="12" height="35" rx="1" ry="1" fill="url(#circuitPattern)"></rect>
|
|
<rect x="84" y="45" width="12" height="25" rx="1" ry="1" fill="#2563eb"></rect>
|
|
<!-- Connecting glow -->
|
|
<path d="M12,55 L14,55 M26,45 L28,45 M40,40 L42,40 M54,40 L56,40 M82,55 L84,55" stroke="#bfdbfe" stroke-width="0.8" stroke-opacity="0.6"></path>
|
|
</g>
|
|
</svg>
|
