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 480 272" width="480" height="272"> | |
| <defs> | |
| <!-- Gradients for the ALTIMIT Background --> | |
| <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" stop-color="#EAA144" /> | |
| <stop offset="45%" stop-color="#D76B15" /> | |
| <stop offset="100%" stop-color="#6B2202" /> | |
| </linearGradient> | |
| <linearGradient id="glassGrad" x1="0%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.6" /> | |
| <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0" /> | |
| </linearGradient> | |
| <linearGradient id="glassGradDark" x1="0%" y1="100%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#000000" stop-opacity="0.4" /> | |
| <stop offset="100%" stop-color="#000000" stop-opacity="0" /> | |
| </linearGradient> | |
| <!-- Sidebar Gradient --> | |
| <linearGradient id="sidebarGrad" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#050505" /> | |
| <stop offset="95%" stop-color="#151515" /> | |
| <stop offset="100%" stop-color="#E87A13" /> | |
| </linearGradient> | |
| <!-- Grid Pattern for Tech Vibe --> | |
| <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse"> | |
| <path d="M 30 0 L 0 0 0 30" fill="none" stroke="#FFFFFF" stroke-width="1" opacity="0.05" /> | |
| </pattern> | |
| <!-- Cyan Glow Filter for Active Elements --> | |
| <filter id="cyanGlow" x="-50%" y="-50%" width="200%" height="200%"> | |
| <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" /> | |
| <feMerge> | |
| <feMergeNode in="blur" /> | |
| <feMergeNode in="SourceGraphic" /> | |
| </feMerge> | |
| </filter> | |
| </defs> | |
| <style> | |
| /* Base Styling */ | |
| text { | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| user-select: none; | |
| } | |
| /* Icon Group Styling */ | |
| .icon-group { | |
| cursor: pointer; | |
| color: #888888; /* currentColor base */ | |
| transition: color 0.3s ease; | |
| } | |
| .icon-group:hover { | |
| color: #FFFFFF; | |
| } | |
| .icon-group.active { | |
| color: #55CCDD; | |
| filter: url(#cyanGlow); | |
| } | |
| /* Text Styling within Icons */ | |
| .icon-text { | |
| font-size: 8px; | |
| font-weight: bold; | |
| letter-spacing: 0.5px; | |
| text-anchor: middle; | |
| fill: currentColor; | |
| } | |
| .icon-shape { | |
| fill: currentColor; | |
| stroke: currentColor; | |
| transition: transform 0.2s ease; | |
| } | |
| .icon-outline { | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 2; | |
| } | |
| /* Active Indicator Tab */ | |
| .active-indicator { | |
| fill: #55CCDD; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .icon-group.active .active-indicator { | |
| opacity: 1; | |
| } | |
| /* Animations */ | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .anim-spin { | |
| animation: spin 8s linear infinite; | |
| } | |
| .anim-spin-fast { | |
| animation: spin 3s linear infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); opacity: 1; } | |
| 50% { transform: scale(0.85); opacity: 0.7; } | |
| } | |
| .anim-pulse { | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 49% { opacity: 1; } | |
| 50%, 100% { opacity: 0; } | |
| } | |
| .anim-blink { | |
| animation: blink 1.5s infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-8px); } | |
| } | |
| .anim-float-1 { animation: float 6s ease-in-out infinite; } | |
| .anim-float-2 { animation: float 8s ease-in-out infinite reverse; } | |
| @keyframes scanline { | |
| 0% { transform: translateY(-20px); opacity: 0; } | |
| 10% { opacity: 0.3; } | |
| 90% { opacity: 0.3; } | |
| 100% { transform: translateY(280px); opacity: 0; } | |
| } | |
| .anim-scanline { | |
| animation: scanline 4s linear infinite; | |
| pointer-events: none; | |
| } | |
| @keyframes wireframe-pulse { | |
| 0%, 100% { stroke-width: 0.5; stroke: #111; } | |
| 50% { stroke-width: 1.5; stroke: #000; } | |
| } | |
| .anim-wireframe { | |
| animation: wireframe-pulse 4s ease-in-out infinite; | |
| } | |
| </style> | |
| <!-- Main Background (Orange Abstract area) --> | |
| <rect x="68" y="0" width="412" height="272" fill="url(#bgGrad)" /> | |
| <rect x="68" y="0" width="412" height="272" fill="url(#grid)" /> | |
| <!-- Abstract Glass/Crystal Polygons (Stylized OS Backdrop) --> | |
| <g transform="translate(68, 0)"> | |
| <polygon points="50,272 200,-20 350,272" fill="url(#glassGrad)" opacity="0.15" class="anim-float-1" /> | |
| <polygon points="-20,150 150,50 300,300" fill="url(#glassGradDark)" opacity="0.3" class="anim-float-2" /> | |
| <polygon points="250,0 450,150 200,300" fill="url(#glassGrad)" opacity="0.1" class="anim-float-1" style="animation-delay: -2s;" /> | |
| <polygon points="80,100 280,-50 380,180 180,280" fill="none" stroke="#FFFFFF" stroke-width="1" opacity="0.2" class="anim-float-2" /> | |
| </g> | |
| <!-- ALTIMIT OS Logo and Wireframe Portal --> | |
| <g transform="translate(130, 136)"> | |
| <!-- Logo Text --> | |
| <text x="0" y="0" font-family="'Courier New', Courier, monospace" font-size="26" font-weight="bold" fill="#111111" letter-spacing="4">[ ALTIMIT ]</text> | |
| <text x="5" y="16" font-family="'Courier New', Courier, monospace" font-size="8" fill="#111111" letter-spacing="6" opacity="0.8">OPERATING SYSTEM</text> | |
| </g> | |
| <!-- Spinning Wireframe Sphere --> | |
| <g transform="translate(390, 130)" opacity="0.7"> | |
| <g class="anim-spin" style="transform-origin: 0px 0px;"> | |
| <circle cx="0" cy="0" r="38" fill="none" stroke="#111111" stroke-width="1" class="anim-wireframe" /> | |
| <ellipse cx="0" cy="0" rx="38" ry="14" fill="none" stroke="#111111" stroke-width="1" class="anim-wireframe" /> | |
| <ellipse cx="0" cy="0" rx="14" ry="38" fill="none" stroke="#111111" stroke-width="1" class="anim-wireframe" /> | |
| <line x1="-38" y1="0" x2="38" y2="0" stroke="#111111" stroke-width="1" /> | |
| <line x1="0" y1="-38" x2="0" y2="38" stroke="#111111" stroke-width="1" /> | |
| </g> | |
| </g> | |
| <!-- Sidebar Area --> | |
| <rect x="0" y="0" width="70" height="272" fill="url(#sidebarGrad)" /> | |
| <!-- ICONS CONTAINER --> | |
| <g id="sidebar-icons"> | |
| <!-- 1. THE WORLD (Active by default) --> | |
| <g class="icon-group active" transform="translate(0, 5)"> | |
| <rect class="active-indicator" x="0" y="4" width="3" height="38" /> | |
| <!-- Outer border --> | |
| <rect x="23" y="4" width="22" height="22" class="icon-outline" /> | |
| <!-- Inner rotating square --> | |
| <g style="transform-origin: 34px 15px;" class="anim-spin"> | |
| <rect x="28" y="9" width="12" height="12" class="icon-shape" /> | |
| </g> | |
| <text x="34" y="38" class="icon-text">THE WORLD</text> | |
| </g> | |
| <!-- 2. MAILER --> | |
| <g class="icon-group" transform="translate(0, 48)"> | |
| <rect class="active-indicator" x="0" y="4" width="3" height="38" /> | |
| <!-- Envelope Body --> | |
| <path d="M 21 8 L 47 8 L 47 22 L 21 22 Z" class="icon-outline" /> | |
| <!-- Envelope Flap --> | |
| <path d="M 21 8 L 34 16 L 47 8" class="icon-outline" /> | |
| <text x="34" y="38" class="icon-text">MAILER</text> | |
| </g> | |
| <!-- 3. NEWS --> | |
| <g class="icon-group" transform="translate(0, 91)"> | |
| <rect class="active-indicator" x="0" y="4" width="3" height="38" /> | |
| <!-- Stylized N --> | |
| <path d="M 23 25 L 23 5 L 30 5 L 39 18 L 39 5 L 45 5 L 45 25 L 38 25 L 29 12 L 29 25 Z" class="icon-shape" /> | |
| <text x="34" y="38" class="icon-text">NEWS</text> | |
| </g> | |
| <!-- 4. ACCESSORY --> | |
| <g class="icon-group" transform="translate(0, 134)"> | |
| <rect class="active-indicator" x="0" y="4" width="3" height="38" /> | |
| <!-- Stylized Plugin / Nib --> | |
| <path d="M 34 3 L 43 12 L 36 26 L 32 26 L 25 12 Z" class="icon-shape" /> | |
| <path d="M 34 12 L 34 22" fill="none" stroke="#111111" stroke-width="2" /> | |
| <circle cx="34" cy="18" r="1.5" fill="#111111" /> | |
| <text x="34" y="38" class="icon-text">ACCESSORY</text> | |
| </g> | |
| <!-- 5. AUDIO --> | |
| <g class="icon-group" transform="translate(0, 177)"> | |
| <rect class="active-indicator" x="0" y="4" width="3" height="38" /> | |
| <!-- Outer Triangle --> | |
| <path d="M 25 5 L 25 25 L 46 15 Z" class="icon-outline" /> | |
| <!-- Inner Pulsing Triangle --> | |
| <g style="transform-origin: 29px 15px;" class="anim-pulse"> | |
| <path d="M 23 10 L 23 20 L 32 15 Z" class="icon-shape" /> | |
| </g> | |
| <text x="34" y="38" class="icon-text">AUDIO</text> | |
| </g> | |
| <!-- 6. DATA --> | |
| <g class="icon-group" transform="translate(0, 220)"> | |
| <rect class="active-indicator" x="0" y="4" width="3" height="38" /> | |
| <!-- Memory Card Body --> | |
| <path d="M 23 5 L 38 5 L 45 12 L 45 26 L 23 26 Z" class="icon-outline" /> | |
| <!-- Contacts/Details --> | |
| <rect x="27" y="10" width="10" height="2" class="icon-shape" /> | |
| <rect x="27" y="14" width="10" height="2" class="icon-shape" /> | |
| <!-- Blinking Status Light --> | |
| <circle cx="40" cy="21" r="1.5" fill="#55CCDD" class="anim-blink" /> | |
| <text x="34" y="38" class="icon-text">DATA</text> | |
| </g> | |
| </g> | |
| <!-- Global CRT Scanline Effect --> | |
| <rect x="0" y="0" width="480" height="8" fill="#FFFFFF" class="anim-scanline" /> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment