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
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="100%" height="100%">
<defs>
<style>
<![CDATA[
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
/* Base Fonts */
text {
font-family: 'Arial Narrow', 'Impact', sans-serif;
font-weight: bold;
text-anchor: middle;
text-transform: uppercase;
letter-spacing: 2px;
user-select: none;
}
.altimit-title {
font-family: 'Share Tech Mono', 'Courier New', monospace;
font-size: 52px;
letter-spacing: 10px;
fill: #111111;
font-weight: normal;
}
.altimit-sub {
font-family: 'Share Tech Mono', 'Courier New', monospace;
font-size: 16px;
letter-spacing: 8px;
fill: #111111;
font-weight: normal;
}
.system-text {
font-family: 'Share Tech Mono', 'Courier New', monospace;
font-size: 12px;
letter-spacing: 2px;
fill: #111111;
opacity: 0.7;
}
/* Colors & Transitions */
.menu-bg {
fill: transparent;
transition: fill 0.15s ease-in-out;
}
.menu-text {
fill: #FFFFFF;
transition: fill 0.15s ease-in-out;
}
.fill-white {
fill: #FFFFFF;
transition: fill 0.15s ease-in-out;
}
.stroke-white {
stroke: #FFFFFF;
fill: none;
transition: stroke 0.15s ease-in-out;
}
/* Hover States for Menu Items */
.menu-item:hover {
cursor: pointer;
}
.menu-item:hover .menu-bg {
fill: #FF6A00;
}
.menu-item:hover .menu-text {
fill: #000000;
}
.menu-item:hover .fill-white {
fill: #000000;
}
.menu-item:hover .stroke-white {
stroke: #000000;
}
/* ---- Icon Animations ---- */
/* 1. The World */
@keyframes float-dot {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.world-dot {
animation: float-dot 3s ease-in-out infinite;
}
@keyframes pulse-frame {
0%, 100% { stroke-width: 4; }
50% { stroke-width: 6; }
}
.world-frame {
animation: pulse-frame 2s ease-in-out infinite;
}
/* 2. Mailer */
@keyframes flap-pulse {
0%, 100% { transform: translateY(0) scaleY(1); }
50% { transform: translateY(3px) scaleY(0.85); }
}
.mailer-flap {
animation: flap-pulse 2s ease-in-out infinite;
transform-origin: 25px 15px;
}
/* 3. News */
@keyframes glitch {
0%, 18%, 22%, 100% { transform: translate(0, 0) skew(0deg); opacity: 1; }
19% { transform: translate(-3px, 1px) skew(-10deg); opacity: 0.8; }
20% { transform: translate(3px, -2px) skew(10deg); opacity: 0.9; }
21% { transform: translate(-1px, 2px) skew(0deg); opacity: 1; }
}
.news-n {
animation: glitch 4s infinite;
}
/* 4. Accessory */
@keyframes load-bar {
0%, 100% { transform: scaleX(1); }
50% { transform: scaleX(0.4); }
}
.acc-bar {
transform-origin: 15px 0;
animation: load-bar 1.5s infinite alternate ease-in-out;
}
.acc-bar:nth-child(2) { animation-delay: 0.2s; }
.acc-bar:nth-child(3) { animation-delay: 0.4s; }
.acc-bar:nth-child(4) { animation-delay: 0.6s; }
.acc-bar:nth-child(5) { animation-delay: 0.8s; }
.acc-bar:nth-child(6) { animation-delay: 1.0s; }
/* 5. Audio */
@keyframes audio-bounce {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(6px); }
}
.audio-inner {
animation: audio-bounce 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
/* 6. Data */
@keyframes data-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.15; }
}
.data-sq-1 { animation: data-blink 2.4s infinite; }
.data-sq-2 { animation: data-blink 2.4s infinite 0.8s; }
.data-sq-3 { animation: data-blink 2.4s infinite 1.6s; }
/* Background Radar Spin */
@keyframes spin {
100% { transform: rotate(360deg); }
}
.radar-spin {
animation: spin 25s linear infinite;
}
@keyframes spin-reverse {
100% { transform: rotate(-360deg); }
}
.radar-spin-reverse {
animation: spin-reverse 35s linear infinite;
}
]]>
</style>
<!-- Background Gradients & Patterns -->
<linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#E85D04" />
<stop offset="50%" stop-color="#F48C06" />
<stop offset="100%" stop-color="#FAA307" />
</linearGradient>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#FFFFFF" stroke-opacity="0.07" stroke-width="1"/>
</pattern>
</defs>
<!-- ==================== MAIN BACKGROUND ==================== -->
<!-- Left Sidebar Area (Black) -->
<rect x="0" y="0" width="120" height="600" fill="#0A0A0A"/>
<!-- Right Content Area (Orange Abstract OS) -->
<rect x="120" y="0" width="680" height="600" fill="url(#bg-grad)"/>
<!-- Abstract Geometric Shards in Background -->
<polygon points="120,0 420,0 200,600 120,600" fill="#DC2F02" opacity="0.6"/>
<polygon points="300,600 550,0 800,150 800,600" fill="#F48C06" opacity="0.5"/>
<polygon points="500,0 800,0 800,250" fill="#FFBA08" opacity="0.7"/>
<polygon points="450,600 700,100 800,100 800,600" fill="#FFFFFF" opacity="0.1"/>
<polygon points="120,300 350,150 600,600 120,450" fill="#000000" opacity="0.05"/>
<!-- Grid Overlay -->
<rect x="120" y="0" width="680" height="600" fill="url(#grid)"/>
<!-- Sidebar Borders -->
<line x1="120" y1="0" x2="120" y2="600" stroke="#FF5400" stroke-width="6"/>
<line x1="124" y1="0" x2="124" y2="600" stroke="#FFFFFF" stroke-width="1" opacity="0.5"/>
<line x1="128" y1="0" x2="128" y2="600" stroke="#000000" stroke-width="1" opacity="0.2"/>
<!-- ==================== LOGO & UI ELEMENTS ==================== -->
<!-- ALTIMIT Text -->
<text x="500" y="300" class="altimit-title">[ ALTIMIT ]</text>
<text x="500" y="335" class="altimit-sub">OPERATING SYSTEM</text>
<text x="780" y="575" text-anchor="end" class="system-text">SYS_VER 1.1 // CORE ONLINE</text>
<text x="780" y="590" text-anchor="end" class="system-text">DISPLAY : : ROOT ACCESS</text>
<!-- Spinning Radar / Eye Element -->
<g transform="translate(710, 310)">
<!-- Static outer elements -->
<circle cx="0" cy="0" r="65" fill="none" stroke="#111111" stroke-width="2"/>
<circle cx="0" cy="0" r="45" fill="none" stroke="#111111" stroke-width="1" stroke-dasharray="4 2"/>
<circle cx="0" cy="0" r="25" fill="none" stroke="#111111" stroke-width="1"/>
<!-- Crosshairs -->
<line x1="-70" y1="0" x2="70" y2="0" stroke="#111111" stroke-width="1.5"/>
<line x1="0" y1="-70" x2="0" y2="70" stroke="#111111" stroke-width="1.5"/>
<line x1="-50" y1="-50" x2="50" y2="50" stroke="#111111" stroke-width="0.5"/>
<line x1="-50" y1="50" x2="50" y2="-50" stroke="#111111" stroke-width="0.5"/>
<!-- Rotating elements -->
<g class="radar-spin">
<path d="M 0 -65 A 65 65 0 0 1 65 0" fill="none" stroke="#111111" stroke-width="4"/>
<path d="M 0 65 A 65 65 0 0 1 -65 0" fill="none" stroke="#111111" stroke-width="4"/>
<circle cx="0" cy="-45" r="3" fill="#111111"/>
<circle cx="0" cy="45" r="3" fill="#111111"/>
</g>
<g class="radar-spin-reverse">
<path d="M -25 0 A 25 25 0 0 0 0 25" fill="none" stroke="#111111" stroke-width="4"/>
<path d="M 25 0 A 25 25 0 0 0 0 -25" fill="none" stroke="#111111" stroke-width="4"/>
<line x1="0" y1="0" x2="35" y2="35" stroke="#111111" stroke-width="2"/>
<circle cx="35" cy="35" r="4" fill="#111111"/>
</g>
</g>
<!-- ==================== SIDEBAR MENU ICONS ==================== -->
<!-- 1. THE WORLD -->
<g class="menu-item" transform="translate(0, 20)">
<rect class="menu-bg" x="0" y="0" width="120" height="90"/>
<g transform="translate(35, 10)">
<!-- Outer broken frame -->
<path d="M 25 5 L 5 5 L 5 45 L 45 45 L 45 25" class="stroke-white world-frame" stroke-width="4" stroke-linejoin="miter"/>
<!-- Inner floating dot -->
<rect x="28" y="8" width="14" height="14" class="fill-white world-dot"/>
</g>
<text class="menu-text" x="60" y="75" font-size="14">THE WORLD</text>
</g>
<!-- 2. MAILER -->
<g class="menu-item" transform="translate(0, 110)">
<rect class="menu-bg" x="0" y="0" width="120" height="90"/>
<g transform="translate(35, 10)">
<!-- Envelope Flap -->
<polygon points="5,15 45,15 25,28" class="fill-white mailer-flap"/>
<!-- Envelope Body -->
<path d="M 5 20 L 5 45 L 45 45 L 45 20 L 25 35 Z" class="stroke-white" stroke-width="4" stroke-linejoin="round"/>
</g>
<text class="menu-text" x="60" y="75" font-size="14">MAILER</text>
</g>
<!-- 3. NEWS -->
<g class="menu-item" transform="translate(0, 200)">
<rect class="menu-bg" x="0" y="0" width="120" height="90"/>
<g transform="translate(35, 10)">
<!-- Stylized 'N' -->
<path d="M 5 45 V 5 H 18 L 32 30 V 5 H 45 V 45 H 32 L 18 20 V 45 Z" class="fill-white news-n"/>
</g>
<text class="menu-text" x="60" y="75" font-size="14">NEWS</text>
</g>
<!-- 4. ACCESSORY -->
<g class="menu-item" transform="translate(0, 290)">
<rect class="menu-bg" x="0" y="0" width="120" height="90"/>
<g transform="translate(35, 10)">
<!-- Vertical Spine -->
<rect x="5" y="5" width="6" height="40" class="fill-white"/>
<!-- Horizontal Cascading Bars -->
<rect x="15" y="8" width="30" height="4" class="fill-white acc-bar"/>
<rect x="15" y="15" width="25" height="4" class="fill-white acc-bar"/>
<rect x="15" y="22" width="20" height="4" class="fill-white acc-bar"/>
<rect x="15" y="29" width="15" height="4" class="fill-white acc-bar"/>
<rect x="15" y="36" width="10" height="4" class="fill-white acc-bar"/>
</g>
<text class="menu-text" x="60" y="75" font-size="14">ACCESSORY</text>
</g>
<!-- 5. AUDIO -->
<g class="menu-item" transform="translate(0, 380)">
<rect class="menu-bg" x="0" y="0" width="120" height="90"/>
<g transform="translate(35, 10)">
<!-- Outer Triangle -->
<polygon points="5,5 5,45 35,25" class="stroke-white" stroke-width="4" stroke-linejoin="round"/>
<!-- Inner Overlapping Triangle -->
<polygon points="12,20 12,45 35,32.5" class="fill-white audio-inner"/>
</g>
<text class="menu-text" x="60" y="75" font-size="14">AUDIO</text>
</g>
<!-- 6. DATA -->
<g class="menu-item" transform="translate(0, 470)">
<rect class="menu-bg" x="0" y="0" width="120" height="90"/>
<g transform="translate(32, 5)">
<!-- Stacked Offset Squares -->
<rect x="5" y="5" width="22" height="22" class="stroke-white data-sq-1" stroke-width="3"/>
<rect x="15" y="15" width="22" height="22" class="stroke-white data-sq-2" stroke-width="3"/>
<rect x="25" y="25" width="22" height="22" class="fill-white data-sq-3"/>
</g>
<text class="menu-text" x="60" y="75" font-size="14">DATA</text>
</g>
</svg>
Display the source blob
Display the rendered blob
Raw
altimit2.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
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