79 lines
4.1 KiB
XML
79 lines
4.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" role="img" aria-label="Illustration: a graph of git commits flowing into a static web page">
|
|
<defs>
|
|
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#00004a"/>
|
|
<stop offset=".55" stop-color="#000063"/>
|
|
<stop offset="1" stop-color="#00009c"/>
|
|
</linearGradient>
|
|
<radialGradient id="glow" cx=".5" cy=".5" r=".5">
|
|
<stop offset="0" stop-color="#00e4d8" stop-opacity=".55"/>
|
|
<stop offset="1" stop-color="#00e4d8" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<linearGradient id="page" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stop-color="#ffffff"/>
|
|
<stop offset="1" stop-color="#eef1f8"/>
|
|
</linearGradient>
|
|
<filter id="blur18"><feGaussianBlur stdDeviation="18"/></filter>
|
|
</defs>
|
|
|
|
<rect width="1600" height="900" fill="url(#bg)"/>
|
|
|
|
<!-- starfield -->
|
|
<g fill="#ffffff">
|
|
<circle cx="140" cy="130" r="2" opacity=".55"/><circle cx="360" cy="80" r="1.4" opacity=".35"/>
|
|
<circle cx="620" cy="150" r="1.8" opacity=".45"/><circle cx="905" cy="70" r="1.4" opacity=".4"/>
|
|
<circle cx="1210" cy="120" r="2" opacity=".5"/><circle cx="1430" cy="200" r="1.5" opacity=".35"/>
|
|
<circle cx="90" cy="420" r="1.5" opacity=".35"/><circle cx="240" cy="700" r="2" opacity=".45"/>
|
|
<circle cx="520" cy="810" r="1.4" opacity=".3"/><circle cx="1050" cy="840" r="1.8" opacity=".4"/>
|
|
<circle cx="1330" cy="760" r="1.4" opacity=".35"/><circle cx="1500" cy="560" r="2" opacity=".5"/>
|
|
<circle cx="760" cy="330" r="1.3" opacity=".3"/><circle cx="1130" cy="300" r="1.5" opacity=".35"/>
|
|
</g>
|
|
|
|
<!-- cherenkov glow behind the merge point -->
|
|
<circle cx="560" cy="450" r="260" fill="url(#glow)" filter="url(#blur18)"/>
|
|
|
|
<!-- git graph: two branches merging -->
|
|
<g fill="none" stroke-linecap="round">
|
|
<path d="M220 260 H420 Q500 260 540 350 L560 450" stroke="#3d3dc4" stroke-width="10"/>
|
|
<path d="M220 640 H420 Q500 640 540 550 L560 450" stroke="#3d3dc4" stroke-width="10"/>
|
|
<path d="M560 450 H840" stroke="#00e4d8" stroke-width="12"/>
|
|
</g>
|
|
<!-- commit nodes -->
|
|
<g stroke="#00004a" stroke-width="6">
|
|
<circle cx="260" cy="260" r="22" fill="#ffffff"/>
|
|
<circle cx="400" cy="260" r="22" fill="#ffffff"/>
|
|
<circle cx="260" cy="640" r="22" fill="#ffffff"/>
|
|
<circle cx="400" cy="640" r="22" fill="#ffffff"/>
|
|
<circle cx="560" cy="450" r="30" fill="#00e4d8"/>
|
|
</g>
|
|
|
|
<!-- flowing into a static page -->
|
|
<g>
|
|
<!-- back pages -->
|
|
<rect x="920" y="212" width="420" height="520" rx="24" fill="#c7cde9" opacity=".45" transform="rotate(-4 1130 470)"/>
|
|
<rect x="905" y="200" width="420" height="520" rx="24" fill="#c7cde9" opacity=".7" transform="rotate(-2 1115 460)"/>
|
|
<!-- front page -->
|
|
<rect x="890" y="190" width="430" height="530" rx="24" fill="url(#page)"/>
|
|
<!-- browser dots -->
|
|
<circle cx="930" cy="232" r="8" fill="#e2e5ee"/><circle cx="958" cy="232" r="8" fill="#e2e5ee"/><circle cx="986" cy="232" r="8" fill="#e2e5ee"/>
|
|
<!-- headline + text lines -->
|
|
<rect x="930" y="286" width="270" height="26" rx="13" fill="#00004a"/>
|
|
<rect x="930" y="336" width="350" height="14" rx="7" fill="#9aa3bf"/>
|
|
<rect x="930" y="366" width="330" height="14" rx="7" fill="#9aa3bf"/>
|
|
<rect x="930" y="396" width="300" height="14" rx="7" fill="#9aa3bf"/>
|
|
<!-- image placeholder with cherenkov accent -->
|
|
<rect x="930" y="440" width="350" height="160" rx="16" fill="#e8ecf6"/>
|
|
<path d="M950 585 L1030 505 L1090 555 L1140 515 L1260 585 Z" fill="#c7cde9"/>
|
|
<circle cx="1215" cy="480" r="16" fill="#00e4d8"/>
|
|
<!-- more text -->
|
|
<rect x="930" y="630" width="340" height="14" rx="7" fill="#9aa3bf"/>
|
|
<rect x="930" y="660" width="250" height="14" rx="7" fill="#9aa3bf"/>
|
|
</g>
|
|
|
|
<!-- markdown glyph riding the flow -->
|
|
<g transform="translate(660 380)">
|
|
<rect x="0" y="0" width="120" height="84" rx="14" fill="#00004a" stroke="#00e4d8" stroke-width="3"/>
|
|
<text x="60" y="56" text-anchor="middle" font-family="Inter, 'Segoe UI', Arial, sans-serif" font-size="38" font-weight="800" fill="#ffffff">M↓</text>
|
|
</g>
|
|
</svg>
|
