53 lines
3 KiB
XML
53 lines
3 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="500" viewBox="0 0 1500 500" role="img" aria-label="Deviant — Power Your Ideas">
|
|||
|
|
<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&display=swap');
|
|||
|
|
.display { font-family: 'Fraunces', Georgia, serif; }
|
|||
|
|
.body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
|
|||
|
|
</style>
|
|||
|
|
<radialGradient id="sky" cx="30%" cy="35%" r="88%">
|
|||
|
|
<stop offset="0%" stop-color="#0c1220"/>
|
|||
|
|
<stop offset="55%" stop-color="#070d1a"/>
|
|||
|
|
<stop offset="100%" stop-color="#02040a"/>
|
|||
|
|
</radialGradient>
|
|||
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
|||
|
|
<feGaussianBlur stdDeviation="18" result="b"/>
|
|||
|
|
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|||
|
|
</filter>
|
|||
|
|
</defs>
|
|||
|
|
|
|||
|
|
<!-- X/Twitter desktop overlays a ~200px circular avatar in the lower-left of the
|
|||
|
|
banner (its centre sits roughly at (150, 425) for a 1500×500 image). Keep
|
|||
|
|
critical copy right of x≈340 to clear it. Top/bottom ~60px can be cropped
|
|||
|
|
on mobile. -->
|
|||
|
|
|
|||
|
|
<rect width="1500" height="500" fill="url(#sky)"/>
|
|||
|
|
<g fill="#ffffff">
|
|||
|
|
<circle cx="200" cy="60" r="1.6" opacity="0.5"/>
|
|||
|
|
<circle cx="380" cy="110" r="1.3" opacity="0.4"/>
|
|||
|
|
<circle cx="540" cy="60" r="1.2" opacity="0.35"/>
|
|||
|
|
<circle cx="720" cy="100" r="1.6" opacity="0.45"/>
|
|||
|
|
<circle cx="900" cy="60" r="1.3" opacity="0.4"/>
|
|||
|
|
<circle cx="1080" cy="110" r="1.7" opacity="0.5"/>
|
|||
|
|
<circle cx="1260" cy="70" r="1.5" opacity="0.4"/>
|
|||
|
|
<circle cx="1400" cy="130" r="1.6" opacity="0.45"/>
|
|||
|
|
<circle cx="440" cy="440" r="1.3" opacity="0.35"/>
|
|||
|
|
<circle cx="620" cy="420" r="1.6" opacity="0.45"/>
|
|||
|
|
<circle cx="820" cy="450" r="1.4" opacity="0.4"/>
|
|||
|
|
<circle cx="1020" cy="420" r="1.7" opacity="0.5"/>
|
|||
|
|
<circle cx="1220" cy="450" r="1.2" opacity="0.35"/>
|
|||
|
|
<circle cx="1400" cy="440" r="1.5" opacity="0.4"/>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Big orbital ring, right-of-center -->
|
|||
|
|
<ellipse cx="1080" cy="260" rx="280" ry="170" fill="none" stroke="#2a3650" stroke-width="8" transform="rotate(-22 1080 260)"/>
|
|||
|
|
<circle cx="1270" cy="130" r="26" fill="#d6ff3d" filter="url(#glow)"/>
|
|||
|
|
|
|||
|
|
<!-- Copy stack — shifted right (x=360) so X/Twitter's desktop avatar
|
|||
|
|
overlap (bottom-left ~200px circle centred near x=150,y=425) clears it. -->
|
|||
|
|
<text class="display" x="360" y="220" font-weight="500" font-size="130" fill="#f1f4fa" letter-spacing="-2">Deviant</text>
|
|||
|
|
<text class="body" x="362" y="272" font-weight="600" font-size="26" fill="#d6ff3d" letter-spacing="5">POWER YOUR IDEAS.</text>
|
|||
|
|
<text class="display" x="360" y="340" font-style="italic" font-weight="400" font-size="28" fill="#b8c2d4">A response to a default trajectory.</text>
|
|||
|
|
<text class="body" x="360" y="378" font-weight="400" font-size="20" fill="#8892a5">On-chain experience that intermediation cannot mediate.</text>
|
|||
|
|
</svg>
|