Ryan Malloy
235ffc955c
The talk exists as audio now: a synthesised narration, four and a half minutes, on a /talk/ page with the full transcript underneath. The transcript is the authoritative version, and the audio is preload="none" so the 2.5 MB file is only fetched if somebody presses play. A second player sits on the homepage, the way spicebook surfaces its pitch. The badge follows the homestar.ink pattern: a small webring-style button in the footer that opens a short modal about the studio. It is a Starlight footer override, so it appears site-wide rather than only on the landing page, and it closes on Escape or backdrop click with focus returned to the badge. Talk script and narration text are kept in drafts/ for reuse.
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>
|