86 lines
4.7 KiB
XML
86 lines
4.7 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="500" viewBox="0 0 1500 500" role="img" aria-label="Deviant — A response to a default trajectory">
|
|||
|
|
<defs>
|
|||
|
|
<style type="text/css">
|
|||
|
|
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');
|
|||
|
|
.display { font-family: 'Fraunces', Georgia, serif; }
|
|||
|
|
.body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
|
|||
|
|
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
|
|||
|
|
</style>
|
|||
|
|
<radialGradient id="sky" cx="28%" cy="30%" r="92%">
|
|||
|
|
<stop offset="0%" stop-color="#0c1220"/>
|
|||
|
|
<stop offset="55%" stop-color="#070d1a"/>
|
|||
|
|
<stop offset="100%" stop-color="#02040a"/>
|
|||
|
|
</radialGradient>
|
|||
|
|
<filter id="acid-glow" x="-50%" y="-50%" width="200%" height="200%">
|
|||
|
|
<feGaussianBlur stdDeviation="4" result="b"/>
|
|||
|
|
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|||
|
|
</filter>
|
|||
|
|
<filter id="node-glow" x="-100%" y="-100%" width="300%" height="300%">
|
|||
|
|
<feGaussianBlur stdDeviation="10" result="b"/>
|
|||
|
|
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|||
|
|
</filter>
|
|||
|
|
</defs>
|
|||
|
|
|
|||
|
|
<!-- Same avatar-safe policy: keep critical copy right of x≈340. -->
|
|||
|
|
|
|||
|
|
<rect width="1500" height="500" fill="url(#sky)"/>
|
|||
|
|
|
|||
|
|
<!-- Sparse starfield -->
|
|||
|
|
<g fill="#ffffff">
|
|||
|
|
<circle cx="220" cy="80" r="1.6" opacity="0.5"/>
|
|||
|
|
<circle cx="380" cy="120" r="1.2" opacity="0.35"/>
|
|||
|
|
<circle cx="560" cy="60" r="1.4" opacity="0.4"/>
|
|||
|
|
<circle cx="740" cy="90" r="1.6" opacity="0.45"/>
|
|||
|
|
<circle cx="920" cy="60" r="1.3" opacity="0.4"/>
|
|||
|
|
<circle cx="1100" cy="90" r="1.5" opacity="0.45"/>
|
|||
|
|
<circle cx="1280" cy="60" r="1.7" opacity="0.5"/>
|
|||
|
|
<circle cx="1420" cy="110" r="1.4" opacity="0.4"/>
|
|||
|
|
<circle cx="480" cy="440" r="1.3" opacity="0.35"/>
|
|||
|
|
<circle cx="700" cy="460" r="1.5" opacity="0.4"/>
|
|||
|
|
<circle cx="920" cy="440" r="1.6" opacity="0.45"/>
|
|||
|
|
<circle cx="1140" cy="460" r="1.2" opacity="0.35"/>
|
|||
|
|
<circle cx="1360" cy="440" r="1.5" opacity="0.4"/>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Copy: wordmark + tagline (left, past avatar overlap) -->
|
|||
|
|
<text class="display" x="360" y="220" font-weight="500" font-size="120" fill="#f1f4fa" letter-spacing="-2">Deviant</text>
|
|||
|
|
<text class="body" x="362" y="270" font-weight="600" font-size="24" fill="#d6ff3d" letter-spacing="5">POWER YOUR IDEAS.</text>
|
|||
|
|
<text class="display" x="360" y="340" font-style="italic" font-weight="400" font-size="26" fill="#b8c2d4">A response to a default trajectory.</text>
|
|||
|
|
|
|||
|
|
<!-- Deviation chart: exact geometry from the site hero (viewBox 380×240),
|
|||
|
|
transformed to sit on the right side of the banner. Scale 1.85x places it
|
|||
|
|
from roughly x=730..1420, y=115..400. -->
|
|||
|
|
<g transform="translate(708 34) scale(1.85)">
|
|||
|
|
<defs>
|
|||
|
|
<!-- Visible curves: exact hero geometry from deviant_website.html:679-681 -->
|
|||
|
|
<path id="path-default" d="M 12 70 C 110 96, 150 120, 200 138 C 255 158, 305 176, 368 198"/>
|
|||
|
|
<path id="path-deviation" d="M 200 138 C 250 120, 300 84, 368 44"/>
|
|||
|
|
<!-- Text-baseline offsets: parallel copies shifted perpendicular to each
|
|||
|
|
curve so labels sit BELOW the default (down-drift) and ABOVE the
|
|||
|
|
deviation (up-lift). Same control-point shape, y shifted uniformly. -->
|
|||
|
|
<path id="path-default-below" d="M 12 86 C 110 112, 150 136, 200 154 C 255 174, 305 192, 368 214"/>
|
|||
|
|
<path id="path-deviation-above" d="M 200 122 C 250 104, 300 68, 368 28"/>
|
|||
|
|
</defs>
|
|||
|
|
|
|||
|
|
<!-- Default trajectory: dashed, muted, curves down-right -->
|
|||
|
|
<use href="#path-default" stroke="#6a7488" stroke-width="1.8" fill="none" opacity="0.75"
|
|||
|
|
stroke-dasharray="4 8" stroke-linecap="round"/>
|
|||
|
|
<!-- Branch dot at the divergence -->
|
|||
|
|
<circle cx="200" cy="138" r="4" fill="#6a7488"/>
|
|||
|
|
<!-- Deviation: solid, acid, curves up-right -->
|
|||
|
|
<use href="#path-deviation" stroke="#d6ff3d" stroke-width="3" fill="none" stroke-linecap="round"
|
|||
|
|
filter="url(#acid-glow)"/>
|
|||
|
|
<!-- Terminal acid node -->
|
|||
|
|
<circle cx="368" cy="44" r="6" fill="#d6ff3d" filter="url(#node-glow)"/>
|
|||
|
|
|
|||
|
|
<!-- Labels run parallel to their respective curves via textPath. Start offsets
|
|||
|
|
chosen so labels sit near the mid/end of each curve. -->
|
|||
|
|
<text class="mono" font-size="10" fill="#6a7488" letter-spacing="2.5">
|
|||
|
|
<textPath href="#path-default-below" startOffset="4%">DEFAULT TRAJECTORY</textPath>
|
|||
|
|
</text>
|
|||
|
|
<text class="mono" font-size="10" fill="#d6ff3d" letter-spacing="2.5">
|
|||
|
|
<textPath href="#path-deviation-above" startOffset="30%">DEVIATION</textPath>
|
|||
|
|
</text>
|
|||
|
|
</g>
|
|||
|
|
</svg>
|