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
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 540" width="100%" height="100%">
<defs>
<style>
<![CDATA[
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
/* Base Typography */
text {
font-family: 'Share Tech Mono', 'Courier New', monospace;
user-select: none;
}
.altimit-title {
font-size: 58px;
letter-spacing: 12px;
fill: #FF5400;
font-weight: bold;
opacity: 0.15;
}
.altimit-sub {
font-size: 18px;
letter-spacing: 8px;
fill: #FF5400;
opacity: 0.3;
}
.system-text {
font-size: 12px;
letter-spacing: 2px;
fill: #FAA307;
}
.desktop-label {
font-family: 'Arial Narrow', sans-serif;
font-size: 14px;
font-weight: bold;
fill: #FFFFFF;
text-anchor: middle;
letter-spacing: 1px;
}
/* Colors & Transitions */
.menu-bg {
fill: transparent;
transition: fill 0.2s ease;
}
.menu-text {
fill: #FFFFFF;
font-family: 'Arial Narrow', sans-serif;
font-weight: bold;
letter-spacing: 2px;
transition: fill 0.2s ease;
}
.fill-accent {
fill: #FF5400;
transition: fill 0.2s ease;
}
.stroke-accent {
stroke: #FF5400;
fill: none;
transition: stroke 0.2s ease;
}
/* Hover States */
.menu-item:hover {
cursor: pointer;
}
.menu-item:hover .menu-bg {
fill: #FF5400;
}
.menu-item:hover .menu-text {
fill: #000000;
}
.menu-item:hover .fill-accent {
fill: #000000;
}
.menu-item:hover .stroke-accent {
stroke: #000000;
}
.desktop-icon:hover {
cursor: pointer;
transform: translateY(-3px);
transition: transform 0.2s ease;
}
/* ---- Icon Animations ---- */
@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: 3; }
50% { stroke-width: 5; }
}
.world-frame {
animation: pulse-frame 2s ease-in-out infinite;
}
@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;
}
@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;
}
@keyframes data-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
.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; }
/* Radar Spin */
@keyframes spin {
100% { transform: rotate(360deg); }
}
.radar-spin {
animation: spin 30s linear infinite;
}
@keyframes spin-reverse {
100% { transform: rotate(-360deg); }
}
.radar-spin-reverse {
animation: spin-reverse 40s linear infinite;
}
/* Hardware LED Blink */
@keyframes led-blink {
0%, 100% { fill: #FF5400; opacity: 1; }
50% { fill: #FF9900; opacity: 0.4; }
}
.hw-led {
animation: led-blink 1s infinite alternate;
}
]]>
</style>
<!-- OS Screen Gradients & Patterns -->
<linearGradient id="os-bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0F0500" />
<stop offset="50%" stop-color="#1A0A00" />
<stop offset="100%" stop-color="#2B1000" />
</linearGradient>
<pattern id="os-grid" width="30" height="30" patternUnits="userSpaceOnUse">
<path d="M 30 0 L 0 0 0 30" fill="none" stroke="#FF5400" stroke-opacity="0.08" stroke-width="1"/>
<circle cx="30" cy="30" r="1" fill="#FF5400" fill-opacity="0.2"/>
</pattern>
<!-- Hardware Gradients (Gunmetal / Dark Cyberpunk) -->
<linearGradient id="hw-metalGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#555555" />
<stop offset="30%" stop-color="#333333" />
<stop offset="70%" stop-color="#1A1A1A" />
<stop offset="100%" stop-color="#0A0A0A" />
</linearGradient>
<linearGradient id="hw-metalBase" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#111111" />
<stop offset="50%" stop-color="#2A2A2A" />
<stop offset="100%" stop-color="#050505" />
</linearGradient>
<linearGradient id="hw-topBarGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#2A2A2A" />
<stop offset="100%" stop-color="#0A0A0A" />
</linearGradient>
<!-- Shadows -->
<filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="#000000" flood-opacity="0.8"/>
</filter>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="0" stdDeviation="4" flood-color="#FF5400" flood-opacity="0.8"/>
</filter>
<!-- Isometric Cube (Altimit Colors) -->
<g id="isometric-cube">
<!-- Top Face -->
<polygon points="12,0 24,6 12,12 0,6" fill="#FAA307"/>
<!-- Left Face -->
<polygon points="0,6 12,12 12,24 0,18" fill="#DC2F02"/>
<!-- Right Face -->
<polygon points="12,12 24,6 24,18 12,24" fill="#9D0208"/>
</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>
<!-- OS File Icon Template -->
<g id="file-icon" filter="url(#dropShadow)">
<!-- Paper/Data Card -->
<path d="M0,0 L26,0 L40,14 L40,50 L0,50 Z" fill="#1A1A1A" stroke="#FF5400" stroke-width="1.5"/>
<!-- Folded Corner -->
<path d="M26,0 L26,14 L40,14 Z" fill="#FF5400" stroke="#FF5400" stroke-width="1.5"/>
<!-- Embedded Cube Cluster -->
<use href="#cube-cluster" x="16" y="28" transform="scale(0.85)"/>
</g>
</defs>
<!-- ======================================================= -->
<!-- ================= INNER OS SCREEN AREA ================== -->
<!-- ======================================================= -->
<!-- The screen area is behind the top/bottom hardware bars (y=22 to 460) -->
<g id="os-screen" transform="translate(0, 0)">
<!-- Base Background -->
<rect x="0" y="22" width="960" height="438" fill="url(#os-bg-grad)" />
<!-- Abstract Geometric Shards (Altimit style) -->
<polygon points="120,22 420,22 200,460 120,460" fill="#DC2F02" opacity="0.15"/>
<polygon points="300,460 650,22 960,150 960,460" fill="#F48C06" opacity="0.1"/>
<polygon points="600,22 960,22 960,300" fill="#FFBA08" opacity="0.15"/>
<polygon points="120,300 450,150 700,460 120,400" fill="#000000" opacity="0.4"/>
<!-- Grid Overlay -->
<rect x="120" y="22" width="840" height="438" fill="url(#os-grid)"/>
<!-- Background Radar Spin -->
<g transform="translate(750, 241)" opacity="0.25" stroke-linecap="round">
<circle cx="0" cy="0" r="140" fill="none" stroke="#FF5400" stroke-width="2"/>
<circle cx="0" cy="0" r="100" fill="none" stroke="#FAA307" stroke-width="1.5" stroke-dasharray="8 4"/>
<circle cx="0" cy="0" r="50" fill="none" stroke="#FF5400" stroke-width="1"/>
<!-- Crosshairs -->
<line x1="-150" y1="0" x2="150" y2="0" stroke="#FF5400" stroke-width="1"/>
<line x1="0" y1="-150" x2="0" y2="150" stroke="#FF5400" stroke-width="1"/>
<!-- Rotating elements -->
<g class="radar-spin">
<path d="M 0 -140 A 140 140 0 0 1 140 0" fill="none" stroke="#FF5400" stroke-width="6"/>
<path d="M 0 140 A 140 140 0 0 1 -140 0" fill="none" stroke="#FF5400" stroke-width="6"/>
<circle cx="0" cy="-100" r="4" fill="#FAA307"/>
<circle cx="0" cy="100" r="4" fill="#FAA307"/>
</g>
<g class="radar-spin-reverse">
<path d="M -50 0 A 50 50 0 0 0 0 50" fill="none" stroke="#FAA307" stroke-width="4"/>
<path d="M 50 0 A 50 50 0 0 0 0 -50" fill="none" stroke="#FAA307" stroke-width="4"/>
<line x1="0" y1="0" x2="70" y2="70" stroke="#FF5400" stroke-width="2"/>
<circle cx="70" cy="70" r="5" fill="#FAA307"/>
</g>
</g>
<!-- Big Altimit Text in Background -->
<text x="540" y="230" class="altimit-title" text-anchor="middle">[ ALTIMIT ]</text>
<text x="540" y="260" class="altimit-sub" text-anchor="middle">OS // PORTABLE EDITION</text>
<!-- ================= TOP NAVIGATION TABS (OS) ================= -->
<g transform="translate(120, 22)">
<!-- Tab Bar Base -->
<path d="M 0 0 L 350 0 C 365 0 375 28 390 28 L 0 28 Z" fill="#111111" filter="url(#dropShadow)" />
<!-- Tab Separators & Outlines -->
<path d="M 0 0 L 350 0 C 365 0 375 28 390 28 L 0 28 Z" fill="none" stroke="#FF5400" stroke-width="1" opacity="0.5"/>
<!-- Active Tab -->
<path d="M 0 0 L 100 0 L 90 28 L 0 28 Z" fill="#FF5400" stroke="#DC2F02" stroke-width="1"/>
<!-- Tab Texts -->
<text x="45" y="19" font-family="'Courier New', monospace" font-size="14" font-weight="bold" fill="#000000" text-anchor="middle">ROOT</text>
<text x="145" y="19" font-family="'Courier New', monospace" font-size="14" font-weight="bold" fill="#FF5400" text-anchor="middle" opacity="0.7">LOCAL</text>
<line x1="190" y1="6" x2="190" y2="22" stroke="#FF5400" stroke-width="1" opacity="0.3"/>
<text x="235" y="19" font-family="'Courier New', monospace" font-size="14" font-weight="bold" fill="#FF5400" text-anchor="middle" opacity="0.7">NETWORK</text>
<line x1="285" y1="6" x2="285" y2="22" stroke="#FF5400" stroke-width="1" opacity="0.3"/>
<text x="325" y="19" font-family="'Courier New', monospace" font-size="14" font-weight="bold" fill="#FF5400" text-anchor="middle" opacity="0.7">DATA</text>
</g>
<!-- ================= DESKTOP ICONS (Main Screen) ================= -->
<!-- 1. My Terminal (Replaces My PSP) -->
<g class="desktop-icon" transform="translate(170, 90)">
<g filter="url(#dropShadow)">
<!-- Cyberdeck Device Shape -->
<rect x="0" y="5" width="56" height="28" rx="4" fill="#1A1A1A" stroke="#FF5400" stroke-width="2"/>
<!-- Screen -->
<rect x="12" y="9" width="32" height="20" fill="#FF5400" fill-opacity="0.2" stroke="#FAA307" stroke-width="1"/>
<line x1="16" y1="14" x2="28" y2="14" stroke="#FAA307" stroke-width="1.5"/>
<line x1="16" y1="18" x2="22" y2="18" stroke="#FAA307" stroke-width="1.5"/>
<!-- Buttons -->
<circle cx="6" cy="19" r="2" fill="#FF5400"/>
<circle cx="50" cy="19" r="2" fill="#FF5400"/>
</g>
<text x="28" y="60" class="desktop-label" filter="url(#dropShadow)">TERMINAL</text>
</g>
<!-- 2. The World -->
<g class="desktop-icon" transform="translate(300, 75)">
<use href="#file-icon" />
<text x="20" y="75" class="desktop-label" filter="url(#dropShadow)">
<tspan x="20" dy="0">THE</tspan>
<tspan x="20" dy="16">WORLD</tspan>
</text>
</g>
<!-- 3. Mailer -->
<g class="desktop-icon" transform="translate(430, 75)">
<use href="#file-icon" />
<text x="20" y="75" class="desktop-label" filter="url(#dropShadow)">MAILER</text>
</g>
<!-- 4. Media Player -->
<g class="desktop-icon" transform="translate(170, 220)">
<use href="#file-icon" />
<text x="20" y="75" class="desktop-label" filter="url(#dropShadow)">
<tspan x="20" dy="0">A/V</tspan>
<tspan x="20" dy="16">PLAYER</tspan>
</text>
</g>
<!-- 5. BBS / Forum -->
<g class="desktop-icon" transform="translate(300, 220)">
<use href="#file-icon" />
<text x="20" y="75" class="desktop-label" filter="url(#dropShadow)">
<tspan x="20" dy="0">CRIMSON</tspan>
<tspan x="20" dy="16">VS</tspan>
</text>
</g>
<!-- ================= LEFT SIDEBAR (Altimit Menus) ================= -->
<rect x="0" y="22" width="120" height="438" fill="#050505" stroke="#FF5400" stroke-width="2"/>
<line x1="116" y1="22" x2="116" y2="460" stroke="#FF5400" stroke-width="1" opacity="0.3"/>
<g transform="translate(0, 35)">
<!-- 1. THE WORLD -->
<g class="menu-item" transform="translate(0, 0)">
<rect class="menu-bg" x="0" y="0" width="118" height="90"/>
<g transform="translate(35, 10)">
<path d="M 25 5 L 5 5 L 5 45 L 45 45 L 45 25" class="stroke-accent world-frame" stroke-width="3" stroke-linejoin="miter"/>
<rect x="28" y="8" width="14" height="14" class="fill-accent world-dot"/>
</g>
<text class="menu-text" x="59" y="75" font-size="13">THE WORLD</text>
</g>
<!-- 2. MAILER -->
<g class="menu-item" transform="translate(0, 95)">
<rect class="menu-bg" x="0" y="0" width="118" height="90"/>
<g transform="translate(35, 10)">
<polygon points="5,15 45,15 25,28" class="fill-accent mailer-flap"/>
<path d="M 5 20 L 5 45 L 45 45 L 45 20 L 25 35 Z" class="stroke-accent" stroke-width="3" stroke-linejoin="round"/>
</g>
<text class="menu-text" x="59" y="75" font-size="13">MAILER</text>
</g>
<!-- 3. NEWS -->
<g class="menu-item" transform="translate(0, 190)">
<rect class="menu-bg" x="0" y="0" width="118" height="90"/>
<g transform="translate(35, 10)">
<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-accent news-n"/>
</g>
<text class="menu-text" x="59" y="75" font-size="13">NEWS</text>
</g>
<!-- 4. DATA -->
<g class="menu-item" transform="translate(0, 285)">
<rect class="menu-bg" x="0" y="0" width="118" height="90"/>
<g transform="translate(32, 5)">
<rect x="5" y="5" width="22" height="22" class="stroke-accent data-sq-1" stroke-width="3"/>
<rect x="15" y="15" width="22" height="22" class="stroke-accent data-sq-2" stroke-width="3"/>
<rect x="25" y="25" width="22" height="22" class="fill-accent data-sq-3"/>
</g>
<text class="menu-text" x="59" y="75" font-size="13">DATA</text>
</g>
</g>
</g>
<!-- ======================================================= -->
<!-- ================= TOP HARDWARE STATUS BAR ================= -->
<!-- ======================================================= -->
<g id="hw-top-bar" filter="url(#dropShadow)">
<rect x="0" y="0" width="960" height="22" fill="url(#hw-topBarGrad)" stroke="#111" stroke-width="1"/>
<line x1="0" y1="21" x2="960" y2="21" stroke="#333" stroke-width="1"/>
<!-- Top Left: Battery & CPU -->
<g transform="translate(15, 5)">
<!-- Battery Outline -->
<rect x="0" y="2" width="20" height="9" fill="none" stroke="#888" stroke-width="1.2"/>
<rect x="20" y="4" width="2" height="5" fill="#888"/>
<!-- Battery Fill -->
<rect x="1" y="3" width="18" height="7" fill="#FF5400"/>
</g>
<text x="45" y="15" class="system-text" fill="#FFF">100%</text>
<!-- Square Activity LED -->
<rect x="90" y="6" width="8" height="8" fill="none" stroke="#FF5400" stroke-width="1.5" rx="1"/>
<rect x="92" y="8" width="4" height="4" class="hw-led" rx="0.5"/>
<text x="110" y="15" class="system-text" fill="#888">333 MHZ</text>
<!-- Top Center: Version -->
<text x="480" y="15" font-family="'Share Tech Mono', monospace" font-size="13" fill="#FFFFFF" text-anchor="middle" letter-spacing="2">
SYS_VER <tspan fill="#FF5400">1.1</tspan> // CORE ONLINE
</text>
<!-- Top Right: Time/Date -->
<g transform="translate(710, 4)">
<!-- Clock Icon -->
<circle cx="8" cy="7" r="6" fill="none" stroke="#888" stroke-width="1.5"/>
<path d="M8,3 L8,7 L11,9" fill="none" stroke="#888" stroke-width="1.5"/>
</g>
<text x="735" y="15" class="system-text" fill="#888">11:20 : NOV 23 2024</text>
</g>
<!-- ======================================================= -->
<!-- =============== BOTTOM HARDWARE CONTROL BAR =============== -->
<!-- ======================================================= -->
<g id="hw-bottom-bar" transform="translate(0, 460)">
<!-- Base Shadow / Lip -->
<path d="M 0 0 L 380 0 L 400 40 L 560 40 L 580 0 L 960 0 L 960 80 L 0 80 Z" fill="#0A0A0A" />
<!-- Main Metallic Body -->
<path d="M 0 15
L 380 15
C 390 15 395 43 405 43
L 555 43
C 565 43 570 15 580 15
L 960 15
L 960 80
L 0 80 Z" fill="url(#hw-metalGrad)" stroke="#444" stroke-width="1"/>
<!-- Top highlight on metal -->
<path d="M 0 16 L 378 16 C 388 16 395 44 405 44 L 555 44 C 565 44 572 16 582 16 L 960 16" fill="none" stroke="#777" stroke-width="1.5" opacity="0.6"/>
<!-- Bottom dark base strip -->
<rect x="0" y="55" width="960" height="25" fill="url(#hw-metalBase)" />
<line x1="0" y1="55" x2="960" y2="55" stroke="#000" stroke-width="2"/>
<!-- Left Trigger Block (L) -->
<g transform="translate(0, 25)">
<path d="M 0 0 L 70 0 L 90 30 L 0 30 Z" fill="#1A1A1A" stroke="#000" stroke-width="1"/>
<path d="M 0 1 L 69 1 L 88 29" fill="none" stroke="#444" stroke-width="1.5"/>
<text x="25" y="19" font-family="'Arial Black', sans-serif" font-size="14" fill="#FF5400" filter="url(#glow)">&lt; L</text>
</g>
<!-- Right Trigger Block (R) -->
<g transform="translate(870, 25)">
<path d="M 90 0 L 20 0 L 0 30 L 90 30 Z" fill="#1A1A1A" stroke="#000" stroke-width="1"/>
<path d="M 90 1 L 21 1 L 2 29" fill="none" stroke="#444" stroke-width="1.5"/>
<text x="45" y="19" font-family="'Arial Black', sans-serif" font-size="14" fill="#FF5400" filter="url(#glow)">R &gt;</text>
</g>
<!-- HTTP / System Info Label (Left) -->
<rect x="100" y="22" width="260" height="20" fill="#0A0A0A" rx="2" stroke="#222" stroke-width="1"/>
<text x="110" y="36" class="system-text" fill="#FAA307" font-size="11">MAC:00:1A:2B // ALTIMIT.NET</text>
<!-- Data / Mode Tabs (Right) -->
<path d="M 680 15 L 660 35 L 960 35 L 960 15 Z" fill="#111" opacity="0.8"/>
<g transform="translate(685, 28)">
<text x="15" y="0" font-family="sans-serif" font-size="11" font-weight="bold" fill="#888" letter-spacing="1">AUDIO</text>
<line x1="60" y1="-10" x2="60" y2="4" stroke="#444" stroke-width="1.5"/>
<text x="75" y="0" font-family="sans-serif" font-size="11" font-weight="bold" fill="#888" letter-spacing="1">VIDEO</text>
<line x1="120" y1="-10" x2="120" y2="4" stroke="#444" stroke-width="1.5"/>
<text x="135" y="0" font-family="sans-serif" font-size="11" font-weight="bold" fill="#888" letter-spacing="1">IMAGE</text>
<line x1="180" y1="-10" x2="180" y2="4" stroke="#444" stroke-width="1.5"/>
<text x="195" y="0" font-family="sans-serif" font-size="11" font-weight="bold" fill="#FF5400" letter-spacing="1">CORE</text>
</g>
<!-- Center Dark Screen Display (Under media buttons) -->
<g transform="translate(415, 10)" filter="url(#dropShadow)">
<rect x="0" y="0" width="130" height="34" rx="3" fill="#050505" stroke="#000" stroke-width="2"/>
<!-- Grid overlay on small screen -->
<rect x="0" y="0" width="130" height="34" rx="3" fill="url(#os-grid)" opacity="0.5"/>
<!-- Highlight overlay -->
<rect x="1" y="1" width="128" height="10" fill="#FFF" opacity="0.05" rx="2"/>
<!-- Audio wave animation on small screen -->
<path d="M 10 17 Q 20 5 30 17 T 50 17 T 70 17 T 90 17 T 110 17" fill="none" stroke="#FF5400" stroke-width="1.5" opacity="0.8"/>
<path d="M 10 17 Q 20 29 30 17 T 50 17 T 70 17 T 90 17 T 110 17" fill="none" stroke="#FAA307" stroke-width="1" opacity="0.5"/>
<!-- Decorative side dots -->
<circle cx="-10" cy="10" r="1.5" fill="#333"/>
<circle cx="-10" cy="17" r="1.5" fill="#333"/>
<circle cx="-10" cy="24" r="1.5" fill="#333"/>
<circle cx="140" cy="10" r="1.5" fill="#333"/>
<circle cx="140" cy="17" r="1.5" fill="#333"/>
<circle cx="140" cy="24" r="1.5" fill="#333"/>
</g>
<!-- Central Media Control Buttons -->
<g transform="translate(422, 57)">
<!-- Pause -->
<circle cx="0" cy="0" r="7" fill="#1A1A1A" stroke="#444" stroke-width="1"/>
<rect x="-2" y="-3" width="1.5" height="6" fill="#888"/>
<rect x="1" y="-3" width="1.5" height="6" fill="#888"/>
<!-- Prev -->
<circle cx="20" cy="0" r="7" fill="#1A1A1A" stroke="#444" stroke-width="1"/>
<polygon points="1,-3 -3,0 1,3" fill="#888"/>
<rect x="-4" y="-3" width="1" height="6" fill="#888"/>
<!-- Play (Highlighted) -->
<circle cx="40" cy="0" r="9" fill="#222" stroke="#FF5400" stroke-width="1.5" filter="url(#glow)"/>
<polygon points="-2,-4 5,0 -2,4" fill="#FF5400"/>
<!-- Next -->
<circle cx="60" cy="0" r="7" fill="#1A1A1A" stroke="#444" stroke-width="1"/>
<polygon points="-1,-3 3,0 -1,3" fill="#888"/>
<rect x="4" y="-3" width="1" height="6" fill="#888"/>
<!-- Stop -->
<circle cx="80" cy="0" r="7" fill="#1A1A1A" stroke="#444" stroke-width="1"/>
<rect x="-2.5" y="-2.5" width="5" height="5" fill="#888"/>
</g>
<!-- Right Bottom Status Block (LINK & Loading Bars) -->
<g transform="translate(615, 50)">
<!-- LINK Box -->
<rect x="0" y="5" width="40" height="20" fill="#111" rx="2" stroke="#444"/>
<!-- Small Arrow inside LINK Box -->
<polygon points="20,7 24,12 16,12" fill="#FF5400" class="hw-led"/>
<text x="20" y="21" font-family="'Share Tech Mono', sans-serif" font-size="10" fill="#FFF" text-anchor="middle">LINK</text>
<!-- Transfer Status Bars -->
<rect x="145" y="10" width="100" height="12" fill="#0A0A0A" stroke="#333" stroke-width="1"/>
<rect x="148" y="12" width="22" height="8" fill="#FF5400"/>
<rect x="173" y="12" width="22" height="8" fill="#FAA307"/>
<rect x="198" y="12" width="22" height="8" fill="#333"/>
<rect x="223" y="12" width="18" height="8" fill="#333"/>
</g>
</g>
<!-- ======================================================= -->
<!-- ===================== MOUSE CURSOR ==================== -->
<!-- ======================================================= -->
<!-- Positioned interacting with "THE WORLD" icon -->
<g transform="translate(325, 125)" filter="url(#dropShadow)">
<path d="M 0 0 L 16 16 L 9 16 L 13 25 L 9 27 L 5 18 L -2 23 Z" fill="#FF5400" stroke="#000000" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M 0 0 L 16 16 L 9 16 L 13 25 L 9 27 L 5 18 L -2 23 Z" fill="none" stroke="#FFFFFF" stroke-width="0.5" stroke-linejoin="round" opacity="0.6"/>
</g>
</svg>
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
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