Skip to content

Instantly share code, notes, and snippets.

@AndrewAltimit

AndrewAltimit/altimit-chat.svg

Last active March 11, 2026 18:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AndrewAltimit/0de682097eb93e52e334b9e19f296822 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AndrewAltimit/0de682097eb93e52e334b9e19f296822 to your computer and use it in GitHub Desktop.
Download ZIP
UI Concept SVGs
Display the source blob
Display the rendered blob
Raw
altimit-chat.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
altimit-psix.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
altimit-psix2.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
altimit-psix3.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
altimit-psix4.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
altimit.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
altimit2.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%">
<defs>
<!-- Background Gradients for the polygonal "crystal" OS look -->
<linearGradient id="bg-grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FF9900"/>
<stop offset="100%" stop-color="#CC5500"/>
</linearGradient>
<linearGradient id="bg-grad2" x1="100%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FFB347"/>
<stop offset="100%" stop-color="#FF7F00"/>
</linearGradient>
<linearGradient id="bg-grad3" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#E65C00"/>
<stop offset="100%" stop-color="#F39C12"/>
</linearGradient>
<linearGradient id="bg-grad4" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stop-color="#FF8C00"/>
<stop offset="100%" stop-color="#B23A00"/>
</linearGradient><!-- UI Highlights -->
<linearGradient id="active-item" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2A2A2A"/>
<stop offset="100%" stop-color="#0A0A0A"/>
</linearGradient>
<!-- Scanline Pattern -->
<pattern id="scanlines" width="4" height="4" patternUnits="userSpaceOnUse">
<rect width="4" height="2" fill="#000000" opacity="0.15"/>
<rect width="4" height="2" y="2" fill="#ffffff" opacity="0.03"/>
</pattern>
<!-- Dot Grid Pattern for ALTIMIT logo -->
<pattern id="dot-grid" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="2" cy="2" r="1" fill="#000000" opacity="0.3"/>
</pattern>
</defs>
<style>
/* Base Styling */
text {
user-select: none;
}
/* Menu Items */
.menu-item {
cursor: pointer;
}
.menu-bg {
fill: transparent;
transition: fill 0.2s ease;
}
.menu-item:hover .menu-bg {
fill: #1F1F1F;
}
/* Icon Colors */
.icon-stroke {
stroke: #AAAAAA;
transition: stroke 0.2s ease;
}
.icon-fill {
fill: #AAAAAA;
transition: fill 0.2s ease;
}
.menu-text {
fill: #AAAAAA;
transition: fill 0.2s ease, letter-spacing 0.2s ease;
}
/* Hover Effects */
.menu-item:hover .icon-stroke {
stroke: #FFFFFF;
}
.menu-item:hover .icon-fill {
fill: #FFFFFF;
}
.menu-item:hover .menu-text {
fill: #FFFFFF;
letter-spacing: 2px;
}
/* Specific Active State for 'THE WORLD' */
.active-menu .menu-bg {
fill: url(#active-item);
}
.active-menu .icon-stroke {
stroke: #FFFFFF;
}
.active-menu .icon-fill {
fill: #FFFFFF;
}
.active-menu .menu-text {
fill: #FFFFFF;
}
/* Glitch animations */
@keyframes glitch {
0% { transform: translate(0, 0); }
20% { transform: translate(-2px, 1px); }
40% { transform: translate(2px, -1px); }
60% { transform: translate(-1px, 2px); }
80% { transform: translate(1px, -2px); }
100% { transform: translate(0, 0); }
}
.glitch-hover:hover {
animation: glitch 0.3s infinite;
}
</style>
<!-- Background Polygons Layer -->
<rect width="800" height="600" fill="#D2691E"/>
<g id="bg-shards">
<polygon points="120,0 800,0 800,600 120,600" fill="url(#bg-grad1)"/>
<polygon points="120,0 550,250 120,600" fill="url(#bg-grad2)"/>
<polygon points="550,250 800,50 800,600 300,600" fill="url(#bg-grad3)"/>
<polygon points="200,0 800,0 800,150 550,250" fill="url(#bg-grad4)"/>
<!-- Translucent floating shards -->
<polygon points="120,150 650,550 120,600" fill="#CC5500" opacity="0.7"/>
<polygon points="450,0 800,350 800,0" fill="#FFB347" opacity="0.3"/>
<!-- Animated shards for ambient "alive" feel -->
<polygon points="350,150 750,350 500,600" fill="#FFFFFF" opacity="0.05">
<animate attributeName="opacity" values="0.05; 0.15; 0.05" dur="7s" repeatCount="indefinite" ease="ease-in-out"/>
<animateTransform attributeName="transform" type="translate" values="0,0; 10,-10; 0,0" dur="10s" repeatCount="indefinite"/>
</polygon>
<polygon points="650,50 800,200 700,450" fill="#FFFFFF" opacity="0.1">
<animate attributeName="opacity" values="0.1; 0.25; 0.1" dur="5s" repeatCount="indefinite"/>
<animateTransform attributeName="transform" type="translate" values="0,0; -15,5; 0,0" dur="8s" repeatCount="indefinite"/>
</polygon>
<polygon points="120,300 400,200 300,500" fill="#000000" opacity="0.15">
<animateTransform attributeName="transform" type="translate" values="0,0; 5,15; 0,0" dur="12s" repeatCount="indefinite"/>
</polygon>
</g>
<!-- ALTIMIT Logo Main Graphic Centerpiece -->
<g transform="translate(250, 150)">
<!-- Background Dot Grid for the logo area -->
<rect x="20" y="30" width="500" height="250" fill="url(#dot-grid)"/>
<!-- Text Section -->
<g transform="translate(40, 90)">
<text x="0" y="0" font-family="'Courier New', Courier, monospace" font-size="44" font-weight="bold" fill="#0A0A0A" letter-spacing="4" opacity="0.9">
[ ALTIMIT ]
</text>
<text x="30" y="25" font-family="'Arial', sans-serif" font-size="12" font-weight="bold" fill="#1A1A1A" letter-spacing="11" opacity="0.8">
OPERATING SYSTEM
</text>
<!-- Tech Barcode / UI detailing below text -->
<g transform="translate(30, 40)" fill="#1A1A1A" opacity="0.8">
<rect x="0" y="0" width="12" height="4"/>
<rect x="18" y="0" width="6" height="4"/>
<rect x="30" y="0" width="24" height="4"/>
<rect x="60" y="0" width="10" height="4"/>
<rect x="76" y="0" width="35" height="4"/>
<rect x="117" y="0" width="18" height="4"/>
<rect x="141" y="0" width="6" height="4"/>
<rect x="153" y="0" width="30" height="4"/>
<rect x="189" y="0" width="12" height="4"/>
<rect x="207" y="0" width="20" height="4"/>
<!-- Animated scanning block inside barcode -->
<rect x="0" y="0" width="15" height="4" fill="#FFFFFF">
<animate attributeName="x" values="0; 215; 0" dur="4s" repeatCount="indefinite"/>
</rect>
</g>
</g>
<!-- ALTIMIT Eye / Spiral Section -->
<g transform="translate(420, 90)">
<!-- Pulsing outer targeting ring -->
<circle cx="0" cy="0" r="95" fill="none" stroke="#1A1A1A" stroke-width="1.5" stroke-dasharray="10 15" opacity="0.6">
<animateTransform attributeName="transform" type="rotate" values="360 0 0; 0 0 0" dur="25s" repeatCount="indefinite"/>
</circle>
<!-- Spinning Wireframe Globe -->
<g opacity="0.85">
<animateTransform attributeName="transform" type="rotate" values="0 0 0; 360 0 0" dur="20s" repeatCount="indefinite"/>
<circle cx="0" cy="0" r="85" fill="none" stroke="#1A1A1A" stroke-width="2"/>
<ellipse cx="0" cy="0" rx="40" ry="85" fill="none" stroke="#1A1A1A" stroke-width="1.5"/>
<ellipse cx="0" cy="0" rx="85" ry="40" fill="none" stroke="#1A1A1A" stroke-width="1.5"/>
<line x1="-90" y1="0" x2="90" y2="0" stroke="#1A1A1A" stroke-width="2"/>
<line x1="0" y1="-90" x2="0" y2="90" stroke="#1A1A1A" stroke-width="2"/>
<!-- Inner Logarithmic Spiral Approximation -->
<path d="M 0,0 A 6,6 0 0,1 6,6 A 12,12 0 0,1 -6,18 A 24,24 0 0,1 -24,-6 A 40,40 0 0,1 18,-35 A 60,60 0 0,1 50,24 A 85,85 0 0,1 -35,75" fill="none" stroke="#000000" stroke-width="3"/>
</g>
<!-- Center Core Pulse -->
<circle cx="0" cy="0" r="3" fill="#000000">
<animate attributeName="r" values="3; 6; 3" dur="2s" repeatCount="indefinite"/>
</circle>
</g>
</g>
<!-- Left Sidebar Menu Frame -->
<g id="sidebar">
<!-- Main Dark Panel -->
<rect x="0" y="0" width="130" height="600" fill="#0A0A0A"/>
<!-- Edge highlight lines -->
<line x1="130" y1="0" x2="130" y2="600" stroke="#E67E22" stroke-width="2"/>
<rect x="123" y="0" width="6" height="600" fill="#E67E22" opacity="0.3"/>
<line x1="123" y1="0" x2="123" y2="600" stroke="#FF9900" stroke-width="1" opacity="0.5"/>
<!-- Menu Icons Container -->
<g transform="translate(0, 10)">
<!-- THE WORLD (Active Item) -->
<g class="menu-item active-menu" transform="translate(0, 0)">
<rect class="menu-bg" width="123" height="90"/>
<rect class="active-indicator" x="0" y="0" width="4" height="90" fill="#FF9900"/>
<g transform="translate(40, 15)">
<!-- Outer Hollow Square -->
<rect class="icon-stroke" x="0" y="0" width="40" height="40" fill="none" stroke-width="4"/>
<!-- Inner Filled Square Animated -->
<rect class="icon-fill" x="12" y="12" width="16" height="16">
<animateTransform attributeName="transform" type="scale" values="1; 1.25; 1" dur="2s" repeatCount="indefinite" transform-origin="20 20"/>
<animateTransform attributeName="transform" type="rotate" values="0 20 20; 90 20 20" dur="4s" repeatCount="indefinite" additive="sum"/>
</rect>
</g>
<text class="menu-text" x="61" y="75" font-family="'Arial', sans-serif" font-size="11" font-weight="bold" text-anchor="middle" letter-spacing="1">THE WORLD</text>
</g>
<!-- MAILER -->
<g class="menu-item" transform="translate(0, 90)">
<rect class="menu-bg" width="123" height="90"/>
<g transform="translate(35, 20)">
<!-- Animated Letter sliding up -->
<rect class="icon-fill" x="10" y="-8" width="30" height="20" opacity="0.6">
<animate attributeName="y" values="-8; -18; -8" dur="2.5s" repeatCount="indefinite"/>
</rect>
<!-- Envelope Body -->
<path class="icon-stroke" d="M 0,0 L 50,0 L 50,30 L 0,30 Z" fill="#0A0A0A" stroke-width="3"/>
<!-- Envelope Flap -->
<path class="icon-stroke" d="M 0,0 L 25,18 L 50,0" fill="none" stroke-width="3"/>
</g>
<text class="menu-text" x="61" y="75" font-family="'Arial', sans-serif" font-size="11" font-weight="bold" text-anchor="middle" letter-spacing="1">MAILER</text>
</g>
<!-- NEWS -->
<g class="menu-item" transform="translate(0, 180)">
<rect class="menu-bg" width="123" height="90"/>
<g transform="translate(35, 10)" class="glitch-hover">
<!-- Stylized N Polygon -->
<polygon class="icon-fill" points="5,40 5,5 18,5 35,28 35,5 45,5 45,40 32,40 15,17 15,40"/>
<!-- Glitching/Scanning overlay -->
<rect x="-5" y="0" width="60" height="3" fill="#FFFFFF" opacity="0.8">
<animate attributeName="y" values="-5; 45; -5" dur="1.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.8; 0.2; 0.8" dur="0.75s" repeatCount="indefinite"/>
</rect>
</g>
<text class="menu-text" x="61" y="75" font-family="'Arial', sans-serif" font-size="11" font-weight="bold" text-anchor="middle" letter-spacing="1">NEWS</text>
</g>
<!-- ACCESSORY -->
<g class="menu-item" transform="translate(0, 270)">
<rect class="menu-bg" width="123" height="90"/>
<g transform="translate(45, 10)">
<!-- Tuning Fork / Abstract Tower Shape -->
<polygon class="icon-stroke" points="15,0 35,35 -5,35" fill="none" stroke-width="3"/>
<line class="icon-stroke" x1="15" y1="10" x2="15" y2="40" stroke-width="3"/>
<polygon class="icon-stroke" points="5,20 25,20" fill="none" stroke-width="3"/>
<!-- Pulsing Top Node -->
<circle class="icon-fill" cx="15" cy="-5" r="3">
<animate attributeName="opacity" values="1; 0.2; 1" dur="1.2s" repeatCount="indefinite"/>
</circle>
<animateTransform attributeName="transform" type="rotate" values="-5 15 20; 5 15 20; -5 15 20" dur="4s" repeatCount="indefinite"/>
</g>
<text class="menu-text" x="61" y="75" font-family="'Arial', sans-serif" font-size="11" font-weight="bold" text-anchor="middle" letter-spacing="1">ACCESSORY</text>
</g>
<!-- AUDIO -->
<g class="menu-item" transform="translate(0, 360)">
<rect class="menu-bg" width="123" height="90"/>
<g transform="translate(35, 12)">
<!-- Overlapping Triangles for Play/Audio symbol -->
<polygon class="icon-fill" points="0,5 25,18 0,30" opacity="0.5"/>
<polygon class="icon-stroke" points="15,-2 45,18 15,38" fill="none" stroke-width="3">
<!-- Pumping Audio EQ effect -->
<animateTransform attributeName="transform" type="scale" values="1; 1.15; 1; 1.05; 1" dur="1.1s" repeatCount="indefinite" transform-origin="25 18"/>
</polygon>
</g>
<text class="menu-text" x="61" y="75" font-family="'Arial', sans-serif" font-size="11" font-weight="bold" text-anchor="middle" letter-spacing="1">AUDIO</text>
</g>
<!-- DATA -->
<g class="menu-item" transform="translate(0, 450)">
<rect class="menu-bg" width="123" height="90"/>
<g transform="translate(40, 5)">
<!-- Stacked Diamond Platters -->
<polygon class="icon-stroke" points="20,10 40,20 20,30 0,20" fill="none" stroke-width="3">
<!-- Hovering animation for top platter -->
<animateTransform attributeName="transform" type="translate" values="0,0; 0,-6; 0,0" dur="2.5s" repeatCount="indefinite" ease="ease-in-out"/>
</polygon>
<polygon class="icon-stroke" points="20,20 40,30 20,40 0,30" fill="none" stroke-width="3"/>
<polygon class="icon-stroke" points="20,30 40,40 20,50 0,40" fill="none" stroke-width="3"/>
<!-- Data flow sparks -->
<circle class="icon-fill" cx="20" cy="20" r="2">
<animate attributeName="cy" values="50; 10; 50" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0; 1; 0" dur="2s" repeatCount="indefinite"/>
</circle>
</g>
<text class="menu-text" x="61" y="75" font-family="'Arial', sans-serif" font-size="11" font-weight="bold" text-anchor="middle" letter-spacing="1">DATA</text>
</g>
</g>
</g>
<!-- Scanline Overlay for retro CRT look -->
<rect width="800" height="600" fill="url(#scanlines)" pointer-events="none"/>
<!-- Bottom Taskbar -->
<g transform="translate(0, 575)">
<rect width="800" height="25" fill="#000000"/>
<!-- Start Button -->
<g class="menu-item" transform="translate(0, 0)">
<rect class="menu-bg" x="0" y="0" width="80" height="25"/>
<rect x="0" y="0" width="80" height="25" fill="#333333" opacity="0.6"/>
<text x="40" y="17" font-family="'Arial', sans-serif" font-size="12" fill="#FFFFFF" font-weight="bold" text-anchor="middle">Cstart</text>
<rect x="78" y="0" width="2" height="25" fill="#555555"/>
</g>
<!-- Open App Icons (small squares) -->
<g transform="translate(90, 4)">
<rect x="0" y="0" width="16" height="16" fill="none" stroke="#FFFFFF" stroke-width="1.5" opacity="0.8"/>
<rect x="4" y="4" width="8" height="8" fill="#FFFFFF" opacity="0.8"/>
<rect x="24" y="0" width="16" height="16" fill="none" stroke="#777777" stroke-width="1.5"/>
<rect x="48" y="0" width="16" height="16" fill="none" stroke="#777777" stroke-width="1.5"/>
<rect x="72" y="0" width="16" height="16" fill="none" stroke="#777777" stroke-width="1.5"/>
<rect x="96" y="0" width="16" height="16" fill="none" stroke="#777777" stroke-width="1.5"/>
</g>
<!-- Bottom Right System Clock area (optional tech detail) -->
<g transform="translate(730, 4)">
<rect x="0" y="0" width="60" height="16" fill="#1A1A1A"/>
<text x="30" y="12" font-family="'Courier New', Courier, monospace" font-size="10" fill="#E67E22" text-anchor="middle">v1.1</text>
</g>
<line x1="0" y1="0" x2="800" y2="0" stroke="#444444" stroke-width="1"/>
</g></svg>
Display the source blob
Display the rendered blob
Raw
altimit3.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
psix.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment