Last active
March 11, 2026 18:43
-
-
Save AndrewAltimit/0de682097eb93e52e334b9e19f296822 to your computer and use it in GitHub Desktop.
UI Concept SVGs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 650" width="100%" height="100%" style="background-color: #03070d; font-family: 'Courier New', Courier, monospace;"> | |
| <defs> | |
| <!-- Glow Filter --> | |
| <filter id="glow" x="-20%" y="-20%" width="140%" height="140%"> | |
| <feGaussianBlur stdDeviation="3" result="blur" /> | |
| <feMerge> | |
| <feMergeNode in="blur" /> | |
| <feMergeNode in="SourceGraphic" /> | |
| </feMerge> | |
| </filter> | |
| <filter id="glow-heavy" x="-30%" y="-30%" width="160%" height="160%"> | |
| <feGaussianBlur stdDeviation="6" result="blur" /> | |
| <feMerge> | |
| <feMergeNode in="blur" /> | |
| <feMergeNode in="SourceGraphic" /> | |
| </feMerge> | |
| </filter> | |
| <!-- Gradients --> | |
| <linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1"> | |
| <stop offset="0%" stop-color="#061224" /> | |
| <stop offset="100%" stop-color="#02050a" /> | |
| </linearGradient> | |
| <linearGradient id="hpGrad" x1="0" y1="0" x2="1" y2="0"> | |
| <stop offset="0%" stop-color="#00f0ff" /> | |
| <stop offset="50%" stop-color="#44ff44" /> | |
| <stop offset="100%" stop-color="#ffff00" /> | |
| </linearGradient> | |
| <linearGradient id="mpGrad" x1="0" y1="0" x2="1" y2="0"> | |
| <stop offset="0%" stop-color="#0044ff" /> | |
| <stop offset="100%" stop-color="#00f0ff" /> | |
| </linearGradient> | |
| <linearGradient id="expGrad" x1="0" y1="0" x2="1" y2="0"> | |
| <stop offset="0%" stop-color="#ff0055" /> | |
| <stop offset="100%" stop-color="#ffb000" /> | |
| </linearGradient> | |
| <linearGradient id="pipBg" x1="0" y1="0" x2="0" y2="1"> | |
| <stop offset="0%" stop-color="#010812" /> | |
| <stop offset="100%" stop-color="#04182b" /> | |
| </linearGradient> | |
| <linearGradient id="chatBg" x1="0" y1="0" x2="0" y2="1"> | |
| <stop offset="0%" stop-color="#061629" stop-opacity="0.8" /> | |
| <stop offset="100%" stop-color="#02060c" stop-opacity="0.9" /> | |
| </linearGradient> | |
| <!-- Patterns --> | |
| <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"> | |
| <line x1="0" y1="0" x2="40" y2="0" stroke="#00f0ff" stroke-width="1" stroke-opacity="0.1" /> | |
| <line x1="0" y1="0" x2="0" y2="40" stroke="#00f0ff" stroke-width="1" stroke-opacity="0.1" /> | |
| </pattern> | |
| <pattern id="scanlines" width="4" height="4" patternUnits="userSpaceOnUse"> | |
| <rect x="0" y="0" width="4" height="2" fill="#000000" fill-opacity="0.3" /> | |
| </pattern> | |
| <!-- Clip Paths --> | |
| <clipPath id="chatClip"> | |
| <rect x="420" y="115" width="440" height="420" /> | |
| </clipPath> | |
| <clipPath id="pipClip"> | |
| <rect x="50" y="70" width="340" height="190" /> | |
| </clipPath> | |
| <clipPath id="hpClip"> | |
| <polygon points="100,340 370,340 360,355 90,355" /> | |
| </clipPath> | |
| </defs> | |
| <!-- ================= BACKGROUND ================= --> | |
| <rect width="100%" height="100%" fill="url(#bgGrad)" /> | |
| <rect width="100%" height="100%" fill="url(#grid)" /> | |
| <!-- Animated Background Orbs --> | |
| <circle cx="200" cy="300" r="150" fill="#00f0ff" opacity="0.05" filter="url(#glow-heavy)"> | |
| <animate attributeName="r" values="150; 170; 150" dur="6s" repeatCount="indefinite" /> | |
| </circle> | |
| <circle cx="700" cy="400" r="200" fill="#ffb000" opacity="0.03" filter="url(#glow-heavy)"> | |
| <animate attributeName="r" values="200; 220; 200" dur="8s" repeatCount="indefinite" /> | |
| </circle> | |
| <!-- ================= OS GLOBAL FRAME ================= --> | |
| <g id="os-frame" stroke="#00f0ff" stroke-width="2" fill="none" opacity="0.6"> | |
| <!-- Main Outer Border --> | |
| <polygon points="30,30 850,30 870,50 870,600 850,620 30,620 10,600 10,50" /> | |
| <!-- Inner Accent Lines --> | |
| <polyline points="25,45 45,25 200,25" /> | |
| <polyline points="855,605 835,625 600,625" /> | |
| <line x1="10" y1="100" x2="10" y2="150" stroke="#ffb000" stroke-width="3" /> | |
| <line x1="870" y1="400" x2="870" y2="480" stroke="#ffb000" stroke-width="3" /> | |
| <!-- Top Bar Details --> | |
| <rect x="30" y="15" width="100" height="10" fill="#00f0ff" /> | |
| <text x="140" y="24" fill="#00f0ff" font-size="10" font-weight="bold" stroke="none" filter="url(#glow)">ALTIMIT_OS v3.2.0 // SYSTEM_SECURE</text> | |
| <text x="730" y="24" fill="#00f0ff" font-size="10" stroke="none">UPLINK: ACTIVE</text> | |
| <circle cx="825" cy="20" r="4" fill="#44ff44" stroke="none" filter="url(#glow)"> | |
| <animate attributeName="opacity" values="1; 0.2; 1" dur="1.5s" repeatCount="indefinite" /> | |
| </circle> | |
| </g> | |
| <!-- ================= PIP (GAME STREAM) ================= --> | |
| <!-- PIP Outer Frame --> | |
| <polygon points="40,60 380,60 400,80 400,270 360,270 340,250 40,250" fill="#030811" stroke="#00f0ff" stroke-width="1.5" opacity="0.9"/> | |
| <text x="50" y="55" fill="#ffb000" font-size="12" font-weight="bold" filter="url(#glow)">[ STREAM.VIDEO_FEED ]</text> | |
| <!-- Live Indicator --> | |
| <rect x="350" y="45" width="40" height="12" fill="#ff0055" /> | |
| <text x="355" y="54" fill="#fff" font-size="9" font-weight="bold">LIVE</text> | |
| <!-- PIP Content (Clipped) --> | |
| <g clip-path="url(#pipClip)"> | |
| <rect x="50" y="70" width="340" height="190" fill="url(#pipBg)" /> | |
| <!-- Horizon Line & Wireframe Floor --> | |
| <line x1="50" y1="180" x2="390" y2="180" stroke="#00f0ff" stroke-width="1" opacity="0.5" filter="url(#glow)"/> | |
| <g stroke="#00f0ff" stroke-width="1" opacity="0.2"> | |
| <line x1="220" y1="180" x2="-50" y2="260" /> | |
| <line x1="220" y1="180" x2="50" y2="260" /> | |
| <line x1="220" y1="180" x2="150" y2="260" /> | |
| <line x1="220" y1="180" x2="290" y2="260" /> | |
| <line x1="220" y1="180" x2="390" y2="260" /> | |
| <line x1="220" y1="180" x2="490" y2="260" /> | |
| <!-- Moving Horizontal Grid Lines --> | |
| <line x1="50" y1="190" x2="390" y2="190"> | |
| <animate attributeName="y1" values="180; 260" dur="2s" repeatCount="indefinite" /> | |
| <animate attributeName="y2" values="180; 260" dur="2s" repeatCount="indefinite" /> | |
| <animate attributeName="opacity" values="0; 1; 0" dur="2s" repeatCount="indefinite" /> | |
| </line> | |
| <line x1="50" y1="210" x2="390" y2="210"> | |
| <animate attributeName="y1" values="180; 260" dur="2s" begin="1s" repeatCount="indefinite" /> | |
| <animate attributeName="y2" values="180; 260" dur="2s" begin="1s" repeatCount="indefinite" /> | |
| <animate attributeName="opacity" values="0; 1; 0" dur="2s" begin="1s" repeatCount="indefinite" /> | |
| </line> | |
| </g> | |
| <!-- The Boss (Floating Octahedron) --> | |
| <g transform="translate(220, 130)"> | |
| <animateTransform attributeName="transform" type="translate" values="220,120; 220,135; 220,120" dur="3s" repeatCount="indefinite" /> | |
| <g filter="url(#glow)"> | |
| <animateTransform attributeName="transform" type="scale" values="1; 1.1; 1" dur="1.5s" repeatCount="indefinite" /> | |
| <polygon points="0,-40 30,0 0,40 -30,0" fill="#ff0055" opacity="0.8" /> | |
| <polygon points="0,-40 0,40 30,0" fill="#ffb000" opacity="0.6" /> | |
| <polygon points="-30,0 30,0 0,10" fill="#fff" opacity="0.3" /> | |
| </g> | |
| <!-- Damage Numbers Simulation --> | |
| <text x="20" y="-30" fill="#fff" font-size="14" font-weight="bold" opacity="0" filter="url(#glow)"> | |
| -482 | |
| <animate attributeName="opacity" values="0; 1; 0" dur="1s" begin="0.5s" repeatCount="indefinite" /> | |
| <animate attributeName="y" values="-20; -40" dur="1s" begin="0.5s" repeatCount="indefinite" /> | |
| </text> | |
| <text x="-40" y="-10" fill="#ffb000" font-size="16" font-weight="bold" opacity="0" filter="url(#glow)"> | |
| CRIT! | |
| <animate attributeName="opacity" values="0; 1; 0" dur="1s" begin="2.2s" repeatCount="indefinite" /> | |
| <animate attributeName="y" values="0; -20" dur="1s" begin="2.2s" repeatCount="indefinite" /> | |
| </text> | |
| </g> | |
| <!-- Player Projectiles / Lasers --> | |
| <line x1="220" y1="260" x2="220" y2="130" stroke="#00f0ff" stroke-width="3" stroke-dasharray="20 40" filter="url(#glow)"> | |
| <animate attributeName="stroke-dashoffset" values="60; 0" dur="0.3s" repeatCount="indefinite" /> | |
| </line> | |
| <line x1="100" y1="260" x2="200" y2="140" stroke="#44ff44" stroke-width="2" stroke-dasharray="10 30" filter="url(#glow)"> | |
| <animate attributeName="stroke-dashoffset" values="40; 0" dur="0.4s" repeatCount="indefinite" /> | |
| </line> | |
| <!-- Target Reticle --> | |
| <g transform="translate(220, 130)" stroke="#00f0ff" stroke-width="1.5" fill="none" opacity="0.7"> | |
| <animateTransform attributeName="transform" type="rotate" values="0 220 130; 360 220 130" dur="5s" repeatCount="indefinite" /> | |
| <circle cx="0" cy="0" r="50" stroke-dasharray="10 10" /> | |
| <line x1="-60" y1="0" x2="-40" y2="0" /> | |
| <line x1="40" y1="0" x2="60" y2="0" /> | |
| <line x1="0" y1="-60" x2="0" y2="-40" /> | |
| <line x1="0" y1="40" x2="0" y2="60" /> | |
| </g> | |
| <!-- HUD Overlay inside PIP --> | |
| <text x="60" y="85" fill="#00f0ff" font-size="10">REC •</text> | |
| <text x="320" y="85" fill="#fff" font-size="10">60 FPS</text> | |
| </g> | |
| <!-- PIP Frame Border Accent --> | |
| <polygon points="50,70 390,70 390,260 50,260" fill="none" stroke="#00f0ff" stroke-width="2" opacity="0.5"/> | |
| <path d="M 45 65 L 60 65 M 380 65 L 395 65 M 395 265 L 380 265 M 60 265 L 45 265" stroke="#ffb000" stroke-width="2" fill="none" /> | |
| <!-- ================= RPG HUD ELEMENTS ================= --> | |
| <g transform="translate(0, 20)"> | |
| <!-- Rotating Cyber Ring Background --> | |
| <g transform="translate(100, 360)" opacity="0.2" stroke="#00f0ff" fill="none"> | |
| <circle cx="0" cy="0" r="50" stroke-width="1" stroke-dasharray="5 5"> | |
| <animateTransform attributeName="transform" type="rotate" values="0; 360" dur="10s" repeatCount="indefinite" /> | |
| </circle> | |
| <circle cx="0" cy="0" r="40" stroke-width="2" stroke-dasharray="20 10"> | |
| <animateTransform attributeName="transform" type="rotate" values="360; 0" dur="8s" repeatCount="indefinite" /> | |
| </circle> | |
| </g> | |
| <!-- User Info Block --> | |
| <text x="40" y="295" fill="#00f0ff" font-size="12" font-weight="bold">USR: <tspan fill="#ffb000" filter="url(#glow)">KITE_01</tspan> // CLS: TWIN BLADE</text> | |
| <line x1="40" y1="305" x2="360" y2="305" stroke="#00f0ff" stroke-width="1" stroke-dasharray="2 4" /> | |
| <!-- Level Hexagon --> | |
| <polygon points="65,315 85,325 85,355 65,365 45,355 45,325" fill="#030811" stroke="#ffb000" stroke-width="2" filter="url(#glow)" /> | |
| <text x="52" y="340" fill="#fff" font-size="10">LV</text> | |
| <text x="52" y="352" fill="#ffb000" font-size="14" font-weight="bold">99</text> | |
| <!-- HP Bar --> | |
| <text x="100" y="330" fill="#44ff44" font-size="12" font-weight="bold" filter="url(#glow)">HP</text> | |
| <polygon points="125,320 360,320 355,332 120,332" fill="#061224" stroke="#44ff44" stroke-width="1" /> | |
| <g clip-path="url(#hpClip)"> | |
| <rect x="120" y="320" height="12" fill="url(#hpGrad)"> | |
| <animate attributeName="width" values="240; 180; 210; 80; 120; 240" dur="6s" repeatCount="indefinite" /> | |
| </rect> | |
| </g> | |
| <!-- HP Text Simulation --> | |
| <text x="270" y="330" fill="#fff" font-size="10" font-weight="bold"> | |
| 2450 / 3000 | |
| <animate attributeName="opacity" values="1; 0.5; 1" dur="3s" repeatCount="indefinite" /> | |
| </text> | |
| <!-- SP Bar --> | |
| <text x="100" y="350" fill="#00f0ff" font-size="12" font-weight="bold" filter="url(#glow)">SP</text> | |
| <polygon points="125,340 320,340 315,350 120,350" fill="#061224" stroke="#00f0ff" stroke-width="1" /> | |
| <polygon points="122,342 280,342 277,348 119,348" fill="url(#mpGrad)" /> | |
| <text x="230" y="349" fill="#fff" font-size="10" font-weight="bold">120 / 500</text> | |
| <!-- EXP Bar --> | |
| <text x="100" y="365" fill="#ffb000" font-size="10" font-weight="bold">EXP</text> | |
| <rect x="125" y="358" width="235" height="4" fill="#061224" stroke="#ffb000" stroke-width="0.5" /> | |
| <rect x="125" y="358" width="180" height="4" fill="url(#expGrad)" filter="url(#glow)" /> | |
| </g> | |
| <!-- ================= TERMINAL LOG ================= --> | |
| <g transform="translate(40, 420)"> | |
| <polygon points="0,0 360,0 360,180 20,180 0,160" fill="#02050a" stroke="#00f0ff" stroke-width="1" opacity="0.8" /> | |
| <rect x="5" y="5" width="350" height="15" fill="#00f0ff" opacity="0.2" /> | |
| <text x="10" y="17" fill="#00f0ff" font-size="10" font-weight="bold">[ SYS.EVENT_LOG ]</text> | |
| <g fill="#00f0ff" font-size="11" opacity="0.8"> | |
| <text x="10" y="40">> EXEC PROC "DATA_DRAIN"</text> | |
| <text x="10" y="60" opacity="0"> | |
| > TARGET LOCK... ACQUIRED | |
| <animate attributeName="opacity" values="0; 1; 1" keyTimes="0; 0.1; 1" dur="5s" begin="1s" repeatCount="indefinite" /> | |
| </text> | |
| <text x="10" y="80" opacity="0"> | |
| > INJECTING CODE_VIRUS[██████░░] 75% | |
| <animate attributeName="opacity" values="0; 1; 1" keyTimes="0; 0.1; 1" dur="5s" begin="2s" repeatCount="indefinite" /> | |
| </text> | |
| <text x="10" y="100" fill="#ffb000" opacity="0"> | |
| > WARNING: PROTECT BREAK! | |
| <animate attributeName="opacity" values="0; 1; 1" keyTimes="0; 0.1; 1" dur="5s" begin="3s" repeatCount="indefinite" /> | |
| </text> | |
| <text x="10" y="120" fill="#44ff44" opacity="0"> | |
| > OVERWRITE SUCCESS. | |
| <animate attributeName="opacity" values="0; 1; 1" keyTimes="0; 0.1; 1" dur="5s" begin="4s" repeatCount="indefinite" /> | |
| </text> | |
| <text x="10" y="140" opacity="0"> | |
| > AWAITING NEXT COMMAND<tspan fill="#fff" opacity="1"><animate attributeName="opacity" values="1;0;1" dur="0.8s" repeatCount="indefinite"/>_</tspan> | |
| <animate attributeName="opacity" values="0; 1; 1" keyTimes="0; 0.05; 1" dur="5s" begin="4.5s" repeatCount="indefinite" /> | |
| </text> | |
| </g> | |
| <!-- Hex Data Scrolling Decoration --> | |
| <g fill="#00f0ff" font-size="8" opacity="0.3" transform="translate(300, 40)"> | |
| <text x="0" y="0">0x0A2</text> | |
| <text x="0" y="15">0x1B4</text> | |
| <text x="0" y="30">0xF33</text> | |
| <text x="0" y="45">0x09C</text> | |
| <text x="0" y="60">0x22D</text> | |
| <text x="0" y="75">0x44A</text> | |
| <text x="0" y="90">0x11B</text> | |
| <animateTransform attributeName="transform" type="translate" values="320,20; 320, -20" dur="2s" repeatCount="indefinite" /> | |
| </g> | |
| </g> | |
| <!-- ================= TWITCH CHAT PANEL ================= --> | |
| <!-- Chat Frame --> | |
| <polygon points="420,60 840,60 860,80 860,590 840,610 420,610" fill="url(#chatBg)" stroke="#00f0ff" stroke-width="1.5" opacity="0.95" /> | |
| <!-- Audio Visualizer Details --> | |
| <g transform="translate(730, 75)" fill="#00f0ff" opacity="0.8"> | |
| <rect x="0" y="0" width="4" height="15"><animate attributeName="y" values="0; 5; 0" dur="0.4s" repeatCount="indefinite"/><animate attributeName="height" values="15; 10; 15" dur="0.4s" repeatCount="indefinite"/></rect> | |
| <rect x="6" y="5" width="4" height="10"><animate attributeName="y" values="5; 0; 5" dur="0.5s" repeatCount="indefinite"/><animate attributeName="height" values="10; 15; 10" dur="0.5s" repeatCount="indefinite"/></rect> | |
| <rect x="12" y="2" width="4" height="13"><animate attributeName="y" values="2; 8; 2" dur="0.3s" repeatCount="indefinite"/><animate attributeName="height" values="13; 7; 13" dur="0.3s" repeatCount="indefinite"/></rect> | |
| <rect x="18" y="7" width="4" height="8"><animate attributeName="y" values="7; 2; 7" dur="0.6s" repeatCount="indefinite"/><animate attributeName="height" values="8; 13; 8" dur="0.6s" repeatCount="indefinite"/></rect> | |
| <rect x="24" y="3" width="4" height="12"><animate attributeName="y" values="3; 9; 3" dur="0.45s" repeatCount="indefinite"/><animate attributeName="height" values="12; 6; 12" dur="0.45s" repeatCount="indefinite"/></rect> | |
| </g> | |
| <!-- Chat Header --> | |
| <text x="435" y="85" fill="#ffb000" font-size="14" font-weight="bold" filter="url(#glow)">[ CHAT.SYS_ONLINE ]</text> | |
| <circle cx="610" cy="80" r="4" fill="#ff0055" filter="url(#glow)"> | |
| <animate attributeName="opacity" values="1; 0.2; 1" dur="1s" repeatCount="indefinite" /> | |
| </circle> | |
| <text x="620" y="84" fill="#fff" font-size="11">VIEWERS: 12,408</text> | |
| <line x1="430" y1="100" x2="850" y2="100" stroke="#00f0ff" stroke-width="1" stroke-dasharray="4 4" opacity="0.5" /> | |
| <!-- Scrolling Chat Container --> | |
| <g clip-path="url(#chatClip)"> | |
| <g font-size="13"> | |
| <!-- | |
| Animation math: | |
| 10 unique messages, spacing = 35. Total unique height = 350. | |
| Duplicate first 5 messages at the end to create a seamless scrolling loop. | |
| Translate Y from 0 to -350 over 15s. | |
| --> | |
| <animateTransform attributeName="transform" type="translate" from="0,0" to="0,-350" dur="12s" repeatCount="indefinite" /> | |
| <!-- Unique Messages (1-10) --> | |
| <!-- Message 1 --> | |
| <text x="430" y="140"> | |
| <tspan fill="#ff0055" font-weight="bold">[VIP]</tspan> | |
| <tspan fill="#ff4444" font-weight="bold">BlackRose:</tspan> | |
| <tspan fill="#e0f8ff">He is going to wipe again 💀💀</tspan> | |
| </text> | |
| <!-- Message 2 --> | |
| <text x="430" y="175"> | |
| <tspan fill="#44ff44" font-weight="bold">[MOD]</tspan> | |
| <tspan fill="#00f0ff" font-weight="bold">Piros:</tspan> | |
| <tspan fill="#e0f8ff">PREPARE THYSELVES!! 🛡️✨</tspan> | |
| </text> | |
| <!-- Message 3 --> | |
| <text x="430" y="210"> | |
| <tspan fill="#4444ff" font-weight="bold">Balmung:</tspan> | |
| <tspan fill="#e0f8ff">Frame data looks inconsistent. 🤔</tspan> | |
| </text> | |
| <!-- Message 4 --> | |
| <text x="430" y="245"> | |
| <tspan fill="#ffb000" font-weight="bold">Mia:</tspan> | |
| <tspan fill="#e0f8ff">POGGERS POG POG 🐱👤</tspan> | |
| </text> | |
| <!-- Message 5 --> | |
| <text x="430" y="280"> | |
| <tspan fill="#ff0055" font-weight="bold">[VIP]</tspan> | |
| <tspan fill="#ffff44" font-weight="bold">Ovan:</tspan> | |
| <tspan fill="#e0f8ff">The lock is breaking. 👁️</tspan> | |
| </text> | |
| <!-- Message 6 --> | |
| <text x="430" y="315"> | |
| <tspan fill="#ffaa00" font-weight="bold">Kuhn:</tspan> | |
| <tspan fill="#e0f8ff">EZ clap, let's goooo 🎮🔥</tspan> | |
| </text> | |
| <!-- Message 7 --> | |
| <text x="430" y="350"> | |
| <tspan fill="#ff44ff" font-weight="bold">Atoli:</tspan> | |
| <tspan fill="#e0f8ff">I believe in you! I'm casting heals! 💖</tspan> | |
| </text> | |
| <!-- Message 8 --> | |
| <text x="430" y="385"> | |
| <tspan fill="#00f0ff" font-weight="bold">HaseoFan99:</tspan> | |
| <tspan fill="#e0f8ff">DATA DRAIN HIM NOW!!! 🌪️</tspan> | |
| </text> | |
| <!-- Message 9 --> | |
| <text x="430" y="420"> | |
| <tspan fill="#aaa" font-weight="bold">Endrance:</tspan> | |
| <tspan fill="#e0f8ff">...Beautiful. 🌹</tspan> | |
| </text> | |
| <!-- Message 10 --> | |
| <text x="430" y="455"> | |
| <tspan fill="#44ff44" font-weight="bold">[MOD]</tspan> | |
| <tspan fill="#00f0ff" font-weight="bold">Piros:</tspan> | |
| <tspan fill="#e0f8ff">BEHOLD MY GLORY LUL 😂</tspan> | |
| </text> | |
| <!-- Duplicated Messages (1-5) for Seamless Loop --> | |
| <text x="430" y="490"> | |
| <tspan fill="#ff0055" font-weight="bold">[VIP]</tspan> | |
| <tspan fill="#ff4444" font-weight="bold">BlackRose:</tspan> | |
| <tspan fill="#e0f8ff">He is going to wipe again 💀💀</tspan> | |
| </text> | |
| <text x="430" y="525"> | |
| <tspan fill="#44ff44" font-weight="bold">[MOD]</tspan> | |
| <tspan fill="#00f0ff" font-weight="bold">Piros:</tspan> | |
| <tspan fill="#e0f8ff">PREPARE THYSELVES!! 🛡️✨</tspan> | |
| </text> | |
| <text x="430" y="560"> | |
| <tspan fill="#4444ff" font-weight="bold">Balmung:</tspan> | |
| <tspan fill="#e0f8ff">Frame data looks inconsistent. 🤔</tspan> | |
| </text> | |
| <text x="430" y="595"> | |
| <tspan fill="#ffb000" font-weight="bold">Mia:</tspan> | |
| <tspan fill="#e0f8ff">POGGERS POG POG 🐱👤</tspan> | |
| </text> | |
| <text x="430" y="630"> | |
| <tspan fill="#ff0055" font-weight="bold">[VIP]</tspan> | |
| <tspan fill="#ffff44" font-weight="bold">Ovan:</tspan> | |
| <tspan fill="#e0f8ff">The lock is breaking. 👁️</tspan> | |
| </text> | |
| </g> | |
| </g> | |
| <!-- Inner Shadow / Vignette for Chat Box --> | |
| <rect x="420" y="100" width="440" height="20" fill="url(#chatBg)" opacity="0.9" /> | |
| <rect x="420" y="530" width="440" height="80" fill="#02060c" opacity="0.9" /> | |
| <!-- Chat Input Area --> | |
| <line x1="430" y1="540" x2="850" y2="540" stroke="#00f0ff" stroke-width="1" stroke-dasharray="2 4" /> | |
| <text x="435" y="565" fill="#00f0ff" font-size="14" font-weight="bold">></text> | |
| <rect x="455" y="552" width="40" height="16" fill="#00f0ff" opacity="0.2" /> | |
| <text x="458" y="564" fill="#00f0ff" font-size="11" font-weight="bold">MSG</text> | |
| <text x="505" y="565" fill="#5588aa" font-style="italic" font-size="13">Send a message to stream...</text> | |
| <text x="735" y="565" fill="#00f0ff" font-size="14" font-weight="bold"> | |
| _ | |
| <animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite" /> | |
| </text> | |
| <polygon points="800,550 840,550 840,570 820,570 815,575 800,575" fill="#00f0ff" opacity="0.8" filter="url(#glow)" /> | |
| <text x="806" y="564" fill="#000" font-size="11" font-weight="bold">SEND</text> | |
| <!-- ================= GLOBAL SCANLINE OVERLAY ================= --> | |
| <rect width="100%" height="100%" fill="url(#scanlines)" pointer-events="none" /> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment