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 960 540" width="100%" height="100%"> | |
| <defs> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); | |
| /* Typography */ | |
| text { | |
| font-family: 'Share Tech Mono', 'Courier New', monospace; | |
| user-select: none; | |
| } | |
| .font-impact { | |
| font-family: 'Impact', 'Arial Black', sans-serif; | |
| } | |
| /* Hover states for interactive elements */ | |
| .nav-item, .file-icon, .btn { | |
| cursor: pointer; | |
| } | |
| .nav-item .bg-highlight { | |
| fill: transparent; | |
| transition: fill 0.2s ease; | |
| } | |
| .nav-item:hover .bg-highlight { | |
| fill: rgba(255, 84, 0, 0.15); | |
| } | |
| .nav-item:hover .icon-stroke { | |
| stroke: #FF5400; | |
| } | |
| .nav-item:hover .icon-fill { | |
| fill: #FF5400; | |
| } | |
| .file-icon .file-body { | |
| fill: #14141A; | |
| stroke: #333333; | |
| transition: all 0.2s ease; | |
| } | |
| .file-icon:hover .file-body { | |
| fill: #1A1A24; | |
| stroke: #00E5FF; | |
| } | |
| .file-icon:hover .file-text { | |
| fill: #00E5FF; | |
| } | |
| .btn:hover .btn-shape { | |
| fill: #2A2A35; | |
| stroke: #00E5FF; | |
| } | |
| .btn:hover .btn-icon { | |
| fill: #00E5FF; | |
| } | |
| /* Glitch & Glow Effects */ | |
| .glow-orange { | |
| filter: drop-shadow(0 0 5px rgba(255, 84, 0, 0.6)); | |
| } | |
| .glow-cyan { | |
| filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.6)); | |
| } | |
| /* Pure CSS Animations for glitches */ | |
| @keyframes glitch { | |
| 0%, 18%, 22%, 100% { transform: translate(0, 0) skew(0deg); opacity: 1; } | |
| 19% { transform: translate(-2px, 1px) skew(-5deg); opacity: 0.8; } | |
| 20% { transform: translate(2px, -1px) skew(5deg); opacity: 0.9; } | |
| 21% { transform: translate(-1px, 1px) skew(0deg); opacity: 1; } | |
| } | |
| .glitch-effect { | |
| animation: glitch 4s infinite; | |
| } | |
| </style> | |
| <!-- Background Gradients --> | |
| <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#140A05" /> | |
| <stop offset="50%" stop-color="#0A0B10" /> | |
| <stop offset="100%" stop-color="#05090F" /> | |
| </linearGradient> | |
| <!-- Drop Shadows --> | |
| <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"> | |
| <feDropShadow dx="2" dy="4" stdDeviation="3" flood-color="#000000" flood-opacity="0.6"/> | |
| </filter> | |
| <!-- UI Grid Pattern --> | |
| <pattern id="hexGrid" width="40" height="40" patternUnits="userSpaceOnUse"> | |
| <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#FFFFFF" stroke-opacity="0.03" stroke-width="1"/> | |
| <circle cx="0" cy="0" r="1" fill="#FF5400" opacity="0.3"/> | |
| </pattern> | |
| <!-- Isometric Cube from PSIX, styled for Altimit OS --> | |
| <g id="isometric-cube"> | |
| <!-- Top Face --> | |
| <polygon points="12,0 24,6 12,12 0,6" fill="#00E5FF"/> | |
| <!-- Left Face --> | |
| <polygon points="0,6 12,12 12,24 0,18" fill="#009BCC"/> | |
| <!-- Right Face --> | |
| <polygon points="12,12 24,6 24,18 12,24" fill="#006699"/> | |
| </g> | |
| <!-- 3-Cube Cluster --> | |
| <g id="cube-cluster"> | |
| <use href="#isometric-cube" x="0" y="12"/> | |
| <use href="#isometric-cube" x="12" y="12"/> | |
| <use href="#isometric-cube" x="6" y="0"/> | |
| </g> | |
| <!-- File Folder Outline Base --> | |
| <g id="folder-base"> | |
| <path class="file-body" d="M 0 0 L 35 0 L 50 15 L 50 70 L 0 70 Z" stroke-width="1.5" filter="url(#shadow)"/> | |
| <path d="M 35 0 L 35 15 L 50 15 Z" fill="#22222D" stroke="#333333" stroke-width="1.5"/> | |
| </g> | |
| </defs> | |
| <!-- ==================== BACKGROUND & GRID ==================== --> | |
| <rect width="960" height="540" fill="url(#bg-grad)" /> | |
| <rect width="960" height="540" fill="url(#hexGrid)" /> | |
| <!-- Abstract Geometry Accents --> | |
| <polygon points="70,540 350,30 960,150 960,540" fill="#FF5400" opacity="0.02" /> | |
| <polygon points="500,540 850,30 960,30 960,540" fill="#00E5FF" opacity="0.01" /> | |
| <!-- Giant Background Watermarks --> | |
| <text x="940" y="320" class="font-impact" font-size="140" font-weight="900" fill="#FFFFFF" opacity="0.02" text-anchor="end" letter-spacing="5">PSIX</text> | |
| <text x="940" y="440" font-size="100" fill="#FF5400" opacity="0.03" text-anchor="end" letter-spacing="15">ALTIMIT</text> | |
| <!-- ==================== MAIN RADAR (Right Side) ==================== --> | |
| <g transform="translate(740, 250)" filter="url(#shadow)"> | |
| <!-- Static Rings --> | |
| <circle cx="0" cy="0" r="160" fill="none" stroke="#FF5400" stroke-width="1" opacity="0.1" stroke-dasharray="2 6"/> | |
| <circle cx="0" cy="0" r="110" fill="none" stroke="#FFFFFF" stroke-width="1" opacity="0.05"/> | |
| <circle cx="0" cy="0" r="75" fill="none" stroke="#00E5FF" stroke-width="2" opacity="0.2"/> | |
| <!-- Concentric Background Rings (from PSIX) --> | |
| <g stroke="#FFFFFF" fill="none" opacity="0.03" stroke-width="8"> | |
| <circle cx="0" cy="0" r="40"/> | |
| <circle cx="0" cy="0" r="80"/> | |
| <circle cx="0" cy="0" r="120"/> | |
| </g> | |
| <!-- Crosshairs --> | |
| <line x1="-180" y1="0" x2="180" y2="0" stroke="#FFFFFF" stroke-width="1" opacity="0.1"/> | |
| <line x1="0" y1="-180" x2="0" y2="180" stroke="#FFFFFF" stroke-width="1" opacity="0.1"/> | |
| <!-- Spinning Outer Element (Clockwise) --> | |
| <g> | |
| <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="25s" repeatCount="indefinite" /> | |
| <path d="M 0 -110 A 110 110 0 0 1 110 0" fill="none" stroke="#FF5400" stroke-width="3" opacity="0.8"/> | |
| <path d="M 0 110 A 110 110 0 0 1 -110 0" fill="none" stroke="#FF5400" stroke-width="3" opacity="0.8"/> | |
| <circle cx="0" cy="-110" r="4" fill="#00E5FF"/> | |
| <circle cx="0" cy="110" r="4" fill="#00E5FF"/> | |
| </g> | |
| <!-- Spinning Inner Element (Counter-Clockwise) --> | |
| <g> | |
| <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="15s" repeatCount="indefinite" /> | |
| <path d="M -50 0 A 50 50 0 0 0 0 50" fill="none" stroke="#00E5FF" stroke-width="4"/> | |
| <path d="M 50 0 A 50 50 0 0 0 0 -50" fill="none" stroke="#00E5FF" stroke-width="4"/> | |
| <line x1="0" y1="0" x2="35" y2="35" stroke="#00E5FF" stroke-width="2"/> | |
| <circle cx="35" cy="35" r="3" fill="#FFFFFF"/> | |
| </g> | |
| <!-- Core Dot --> | |
| <circle cx="0" cy="0" r="6" fill="#FF5400" class="glow-orange"> | |
| <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite"/> | |
| </circle> | |
| </g> | |
| <!-- ==================== DESKTOP ICONS (Main Area) ==================== --> | |
| <!-- Icon 1: Network Gate --> | |
| <g class="file-icon" transform="translate(130, 80)"> | |
| <use href="#folder-base"/> | |
| <!-- Glitch 'N' Icon inside --> | |
| <path d="M 12 40 V 22 H 18 L 24 33 V 22 H 30 V 40 H 24 L 18 29 V 40 Z" fill="#FFFFFF" opacity="0.8" class="glitch-effect icon-fill"/> | |
| <text x="25" y="90" font-size="13" fill="#AAAAAA" text-anchor="middle" class="file-text" letter-spacing="1">NET_GATE</text> | |
| </g> | |
| <!-- Icon 2: Media Core --> | |
| <g class="file-icon" transform="translate(240, 80)"> | |
| <use href="#folder-base"/> | |
| <!-- Audio Triangle inside --> | |
| <polygon points="14,24 14,40 30,32" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.8" stroke-linejoin="round" class="icon-stroke"/> | |
| <polygon points="20,30 20,40 30,35" fill="#FFFFFF" opacity="0.6" class="icon-fill"> | |
| <animateTransform attributeName="transform" type="translate" values="0,0; 3,0; 0,0" dur="1s" repeatCount="indefinite" /> | |
| </polygon> | |
| <text x="25" y="90" font-size="13" fill="#AAAAAA" text-anchor="middle" class="file-text" letter-spacing="1">MEDIA_CORE</text> | |
| </g> | |
| <!-- Icon 3: System Core --> | |
| <g class="file-icon" transform="translate(350, 80)"> | |
| <use href="#folder-base"/> | |
| <!-- Embedded Cube Cluster --> | |
| <use href="#cube-cluster" x="12" y="24" transform="scale(0.85)"/> | |
| <text x="25" y="90" font-size="13" fill="#AAAAAA" text-anchor="middle" class="file-text" letter-spacing="1">SYS_CORE</text> | |
| </g> | |
| <!-- Icon 4: My PSP / Handheld Device --> | |
| <g class="file-icon" transform="translate(130, 220)"> | |
| <!-- Glowing Device Outline --> | |
| <rect x="0" y="15" width="56" height="30" rx="15" fill="#14141A" stroke="#333333" stroke-width="2" class="file-body" filter="url(#shadow)"/> | |
| <rect x="14" y="20" width="28" height="20" fill="#0A0A0C" stroke="#444444" stroke-width="1.5"/> | |
| <circle cx="8" cy="30" r="2" fill="#FFFFFF" opacity="0.7" class="icon-fill"/> | |
| <circle cx="48" cy="30" r="2" fill="#FFFFFF" opacity="0.7" class="icon-fill"/> | |
| <text x="28" y="65" font-size="13" fill="#AAAAAA" text-anchor="middle" class="file-text" letter-spacing="1">MY_DEVICE</text> | |
| </g> | |
| <!-- Decorative System Data Box --> | |
| <g transform="translate(240, 220)"> | |
| <rect x="0" y="15" width="160" height="40" fill="#000000" opacity="0.4" stroke="#333333" stroke-width="1"/> | |
| <text x="10" y="32" font-size="10" fill="#FF5400" letter-spacing="1">ALLOCATION TABLE [OK]</text> | |
| <text x="10" y="46" font-size="10" fill="#00E5FF" letter-spacing="1"> | |
| 0xFA80 <animate attributeName="opacity" values="1;0;1" dur="1.5s" repeatCount="indefinite"/>_ | |
| </text> | |
| </g> | |
| <!-- ==================== TOP STATUS BAR ==================== --> | |
| <g transform="translate(70, 0)"> | |
| <!-- Base Bar --> | |
| <rect x="0" y="0" width="890" height="28" fill="#0A0B10" /> | |
| <line x1="0" y1="28" x2="890" y2="28" stroke="#FF5400" stroke-width="1.5" opacity="0.5"/> | |
| <!-- Battery / CPU Section (Left) --> | |
| <g transform="translate(20, 7)"> | |
| <!-- Battery Icon --> | |
| <rect x="0" y="1" width="22" height="10" fill="none" stroke="#FFFFFF" stroke-width="1.2" opacity="0.6"/> | |
| <rect x="22" y="3" width="2" height="6" fill="#FFFFFF" opacity="0.6"/> | |
| <rect x="2" y="3" width="18" height="6" fill="#00E5FF" class="glow-cyan"/> | |
| <!-- Text --> | |
| <text x="35" y="11" font-size="12" fill="#E0E0E0" font-weight="bold">100%</text> | |
| </g> | |
| <text x="120" y="18" font-size="12" fill="#888888" letter-spacing="1">CPU:<tspan fill="#FFFFFF">333MHz</tspan> // MEM:<tspan fill="#FFFFFF">64MB</tspan></text> | |
| <!-- Center OS Version --> | |
| <text x="445" y="18" font-size="14" fill="#FF5400" text-anchor="middle" letter-spacing="4" font-weight="bold">ALTIMIT<tspan fill="#E0E0E0"> OS</tspan> v2.0</text> | |
| <!-- Clock / Date Section (Right) --> | |
| <g transform="translate(860, 18)"> | |
| <text x="0" y="0" font-size="12" fill="#888888" text-anchor="end" letter-spacing="1"> | |
| 16:38 : MAR 05 2026 | |
| </text> | |
| </g> | |
| </g> | |
| <!-- ==================== LEFT NAVIGATION SIDEBAR ==================== --> | |
| <g transform="translate(0, 0)"> | |
| <!-- Sidebar Base --> | |
| <rect x="0" y="0" width="70" height="540" fill="#050508" /> | |
| <line x1="70" y1="0" x2="70" y2="540" stroke="#FF5400" stroke-width="2" opacity="0.8"/> | |
| <!-- Top abstract dots --> | |
| <circle cx="35" cy="20" r="2" fill="#00E5FF" opacity="0.5"/> | |
| <circle cx="35" cy="30" r="2" fill="#00E5FF" opacity="0.5"/> | |
| <!-- Nav 1: The World --> | |
| <g class="nav-item" transform="translate(0, 80)"> | |
| <rect x="0" y="0" width="70" height="70" class="bg-highlight"/> | |
| <g transform="translate(15, 15)"> | |
| <path d="M 25 5 L 5 5 L 5 40 L 40 40 L 40 25" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linejoin="miter" class="icon-stroke"/> | |
| <rect x="28" y="8" width="10" height="10" fill="#FFFFFF" class="icon-fill"> | |
| <animateTransform attributeName="transform" type="translate" values="0,0; 0,-4; 0,0" dur="2.5s" repeatCount="indefinite" /> | |
| </rect> | |
| </g> | |
| </g> | |
| <!-- Nav 2: Mailer --> | |
| <g class="nav-item" transform="translate(0, 160)"> | |
| <rect x="0" y="0" width="70" height="70" class="bg-highlight"/> | |
| <g transform="translate(15, 18)"> | |
| <polygon points="5,10 35,10 20,22" fill="#FFFFFF" class="icon-fill"> | |
| <animateTransform attributeName="transform" type="translate" values="0,0; 0,2; 0,0" dur="2s" repeatCount="indefinite" /> | |
| </polygon> | |
| <path d="M 5 15 L 5 35 L 35 35 L 35 15 L 20 28 Z" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linejoin="round" class="icon-stroke"/> | |
| </g> | |
| </g> | |
| <!-- Nav 3: Accessory --> | |
| <g class="nav-item" transform="translate(0, 240)"> | |
| <rect x="0" y="0" width="70" height="70" class="bg-highlight"/> | |
| <g transform="translate(15, 15)"> | |
| <rect x="5" y="5" width="5" height="35" fill="#FFFFFF" class="icon-fill"/> | |
| <rect x="15" y="8" width="20" height="3" fill="#FFFFFF" class="icon-fill"> | |
| <animate attributeName="width" values="20;10;20" dur="1.5s" repeatCount="indefinite" /> | |
| </rect> | |
| <rect x="15" y="16" width="15" height="3" fill="#FFFFFF" class="icon-fill"> | |
| <animate attributeName="width" values="15;5;15" dur="1.7s" repeatCount="indefinite" /> | |
| </rect> | |
| <rect x="15" y="24" width="25" height="3" fill="#FFFFFF" class="icon-fill"> | |
| <animate attributeName="width" values="25;12;25" dur="1.3s" repeatCount="indefinite" /> | |
| </rect> | |
| <rect x="15" y="32" width="10" height="3" fill="#FFFFFF" class="icon-fill"> | |
| <animate attributeName="width" values="10;20;10" dur="1.9s" repeatCount="indefinite" /> | |
| </rect> | |
| </g> | |
| </g> | |
| <!-- Nav 4: Data --> | |
| <g class="nav-item" transform="translate(0, 320)"> | |
| <rect x="0" y="0" width="70" height="70" class="bg-highlight"/> | |
| <g transform="translate(15, 15)"> | |
| <rect x="2" y="2" width="16" height="16" fill="none" stroke="#FFFFFF" stroke-width="2" class="icon-stroke" opacity="0.6"/> | |
| <rect x="10" y="10" width="16" height="16" fill="none" stroke="#FFFFFF" stroke-width="2" class="icon-stroke" opacity="0.8"/> | |
| <rect x="18" y="18" width="16" height="16" fill="#FFFFFF" class="icon-fill"> | |
| <animate attributeName="opacity" values="1;0.2;1" dur="2s" repeatCount="indefinite"/> | |
| </rect> | |
| </g> | |
| </g> | |
| <!-- Bottom sidebar status indicator --> | |
| <g transform="translate(35, 500)"> | |
| <circle cx="0" cy="0" r="15" fill="none" stroke="#333333" stroke-width="2"/> | |
| <circle cx="0" cy="0" r="8" fill="#FF5400"> | |
| <animate attributeName="r" values="8;5;8" dur="1.5s" repeatCount="indefinite" /> | |
| </circle> | |
| </g> | |
| </g> | |
| <!-- ==================== BOTTOM MEDIA BAR ==================== --> | |
| <g transform="translate(70, 480)"> | |
| <!-- Base Body --> | |
| <rect x="0" y="0" width="890" height="60" fill="#050508" /> | |
| <line x1="0" y1="0" x2="890" y2="0" stroke="#FF5400" stroke-width="2" opacity="0.5"/> | |
| <rect x="0" y="1" width="890" height="2" fill="#00E5FF" opacity="0.1"/> | |
| <!-- Left Shoulder Box --> | |
| <g class="btn" transform="translate(20, 15)"> | |
| <path class="btn-shape" d="M 0 0 L 55 0 L 45 30 L 0 30 Z" fill="#14141A" stroke="#333333" stroke-width="1.5"/> | |
| <text x="22" y="20" font-size="14" fill="#AAAAAA" font-weight="bold" class="btn-icon">< L1</text> | |
| </g> | |
| <!-- Right Shoulder Box --> | |
| <g class="btn" transform="translate(815, 15)"> | |
| <path class="btn-shape" d="M 55 0 L 0 0 L 10 30 L 55 30 Z" fill="#14141A" stroke="#333333" stroke-width="1.5"/> | |
| <text x="32" y="20" font-size="14" fill="#AAAAAA" font-weight="bold" text-anchor="middle" class="btn-icon">R1 ></text> | |
| </g> | |
| <!-- URL Indicator --> | |
| <rect x="100" y="20" width="200" height="20" rx="3" fill="#000000" opacity="0.4" stroke="#222222" stroke-width="1"/> | |
| <text x="110" y="34" font-size="11" fill="#FF5400" letter-spacing="1">HTTP://ALTIMIT.OS/PSIX</text> | |
| <!-- Center Media Screen (PSIX style grid + Altimit EQ) --> | |
| <g transform="translate(395, 10)" filter="url(#shadow)"> | |
| <rect x="0" y="0" width="100" height="40" rx="3" fill="#0A0B10" stroke="#333333" stroke-width="2"/> | |
| <!-- EQ Bars inside screen --> | |
| <g fill="#00E5FF" class="glow-cyan"> | |
| <rect x="15" y="26" width="10" height="4"> | |
| <animate attributeName="height" values="4;24;8;16;4" dur="1.2s" repeatCount="indefinite" /> | |
| <animate attributeName="y" values="26;6;22;14;26" dur="1.2s" repeatCount="indefinite" /> | |
| </rect> | |
| <rect x="30" y="16" width="10" height="14"> | |
| <animate attributeName="height" values="14;6;26;12;14" dur="0.8s" repeatCount="indefinite" /> | |
| <animate attributeName="y" values="16;24;4;18;16" dur="0.8s" repeatCount="indefinite" /> | |
| </rect> | |
| <rect x="45" y="22" width="10" height="8"> | |
| <animate attributeName="height" values="8;20;12;28;8" dur="1.5s" repeatCount="indefinite" /> | |
| <animate attributeName="y" values="22;10;18;2;22" dur="1.5s" repeatCount="indefinite" /> | |
| </rect> | |
| <rect x="60" y="10" width="10" height="20"> | |
| <animate attributeName="height" values="20;10;22;8;20" dur="1.1s" repeatCount="indefinite" /> | |
| <animate attributeName="y" values="10;20;8;22;10" dur="1.1s" repeatCount="indefinite" /> | |
| </rect> | |
| <rect x="75" y="26" width="10" height="4"> | |
| <animate attributeName="height" values="4;16;6;22;4" dur="1.3s" repeatCount="indefinite" /> | |
| <animate attributeName="y" values="26;14;24;8;26" dur="1.3s" repeatCount="indefinite" /> | |
| </rect> | |
| </g> | |
| <!-- Decorative screen bolts --> | |
| <circle cx="-10" cy="12" r="1.5" fill="#555"/> | |
| <circle cx="-10" cy="28" r="1.5" fill="#555"/> | |
| <circle cx="110" cy="12" r="1.5" fill="#555"/> | |
| <circle cx="110" cy="28" r="1.5" fill="#555"/> | |
| </g> | |
| <!-- Media Controls (Arranged around screen) --> | |
| <!-- Prev --> | |
| <g class="btn" transform="translate(355, 30)"> | |
| <circle cx="0" cy="0" r="14" fill="#0A0B10" stroke="#444444" stroke-width="1.5" class="btn-shape"/> | |
| <polygon points="2,-5 -4,0 2,5" fill="#AAAAAA" class="btn-icon"/> | |
| <rect x="-6" y="-5" width="2" height="10" fill="#AAAAAA" class="btn-icon"/> | |
| </g> | |
| <!-- Play/Pause Block --> | |
| <g class="btn" transform="translate(320, 30)"> | |
| <circle cx="0" cy="0" r="14" fill="#14141A" stroke="#FF5400" stroke-width="1.5" class="btn-shape glow-orange"/> | |
| <polygon points="-3,-5 5,0 -3,5" fill="#FF5400" class="btn-icon"/> | |
| </g> | |
| <!-- Next --> | |
| <g class="btn" transform="translate(535, 30)"> | |
| <circle cx="0" cy="0" r="14" fill="#0A0B10" stroke="#444444" stroke-width="1.5" class="btn-shape"/> | |
| <polygon points="-2,-5 4,0 -2,5" fill="#AAAAAA" class="btn-icon"/> | |
| <rect x="4" y="-5" width="2" height="10" fill="#AAAAAA" class="btn-icon"/> | |
| </g> | |
| <!-- Stop --> | |
| <g class="btn" transform="translate(570, 30)"> | |
| <circle cx="0" cy="0" r="14" fill="#0A0B10" stroke="#444444" stroke-width="1.5" class="btn-shape"/> | |
| <rect x="-4" y="-4" width="8" height="8" fill="#AAAAAA" class="btn-icon"/> | |
| </g> | |
| <!-- USB / Connection Status (Right Side) --> | |
| <g transform="translate(640, 20)"> | |
| <!-- USB Icon --> | |
| <rect x="0" y="0" width="30" height="20" rx="2" fill="#14141A" stroke="#333333" stroke-width="1"/> | |
| <polygon points="15,4 19,9 11,9" fill="#00E5FF"/> | |
| <text x="15" y="17" font-size="9" fill="#AAAAAA" text-anchor="middle" font-weight="bold">USB</text> | |
| <!-- Network Bars --> | |
| <rect x="40" y="5" width="80" height="10" fill="#050508" stroke="#444444" stroke-width="1"/> | |
| <rect x="43" y="7" width="15" height="6" fill="#00E5FF"/> | |
| <rect x="61" y="7" width="15" height="6" fill="#00E5FF"/> | |
| <rect x="79" y="7" width="15" height="6" fill="#00E5FF"/> | |
| <rect x="97" y="7" width="20" height="6" fill="#222222"/> | |
| </g> | |
| </g> | |
| <!-- ==================== MOUSE CURSOR ==================== --> | |
| <g transform="translate(480, 270)" filter="url(#shadow)"> | |
| <path d="M 0 0 L 14 14 L 7 14 L 11 22 L 7 24 L 3 16 L -3 21 Z" fill="#FF5400" stroke="#FFFFFF" stroke-width="1.2" stroke-linejoin="round"/> | |
| </g> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment