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
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
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 540" width="100%" height="100%">
<defs>
<!-- Background Gradient -->
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FFAE00" />
<stop offset="30%" stop-color="#FFDD00" />
<stop offset="65%" stop-color="#A2E800" />
<stop offset="100%" stop-color="#66CC00" />
</linearGradient>
<!-- Metallic Gradient for Bottom Bar -->
<linearGradient id="metalGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="30%" stop-color="#E0E0E0" />
<stop offset="70%" stop-color="#CCCCCC" />
<stop offset="100%" stop-color="#999999" />
</linearGradient>
<!-- Metallic Gradient for Bottom Bar Base -->
<linearGradient id="metalBase" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#999" />
<stop offset="50%" stop-color="#DDD" />
<stop offset="100%" stop-color="#555" />
</linearGradient>
<!-- Dark Gradient for Top Bar -->
<linearGradient id="topBarGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4A4A4A" />
<stop offset="100%" stop-color="#2D2D2D" />
</linearGradient>
<!-- Drop Shadows -->
<filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="#000000" flood-opacity="0.6"/>
</filter>
<filter id="textShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="1.5" dy="1.5" stdDeviation="1" flood-color="#000000" flood-opacity="0.8"/>
</filter>
<!-- Magenta Cube Component -->
<g id="isometric-cube">
<!-- Top Face -->
<polygon points="12,0 24,6 12,12 0,6" fill="#D81B60"/>
<!-- Left Face -->
<polygon points="0,6 12,12 12,24 0,18" fill="#880E4F"/>
<!-- Right Face -->
<polygon points="12,12 24,6 24,18 12,24" fill="#AD1457"/>
</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 Icon Template -->
<g id="file-icon" filter="url(#dropShadow)">
<!-- Paper -->
<path d="M0,0 L26,0 L40,14 L40,50 L0,50 Z" fill="#FFFFFF" stroke="#333333" stroke-width="1.5"/>
<!-- Folded Corner -->
<path d="M26,0 L26,14 L40,14 Z" fill="#E0E0E0" stroke="#333333" stroke-width="1.5"/>
<!-- Embedded Cube Cluster -->
<use href="#cube-cluster" x="16" y="28" transform="scale(0.85)"/>
</g>
<pattern id="gridPattern" width="6" height="6" patternUnits="userSpaceOnUse">
<rect width="6" height="6" fill="#2d1e3d" />
<path d="M 6 0 L 0 0 0 6" fill="none" stroke="#462c66" stroke-width="1" />
</pattern>
</defs>
<!-- ================= BACKGROUND ================= -->
<rect width="960" height="540" fill="url(#bgGrad)" />
<!-- Background Abstract Waves -->
<path d="M 0 100 Q 300 300 960 50 L 960 0 L 0 0 Z" fill="#FFFFFF" opacity="0.05" />
<path d="M 0 540 Q 400 300 960 200 L 960 540 Z" fill="#44AA00" opacity="0.15" />
<path d="M 200 540 Q 600 400 960 450 L 960 540 Z" fill="#000000" opacity="0.05" />
<!-- Background Concentric Circles -->
<g stroke="#FFFFFF" fill="none" opacity="0.06" stroke-width="25">
<circle cx="480" cy="270" r="100"/>
<circle cx="480" cy="270" r="200"/>
<circle cx="480" cy="270" r="300"/>
<circle cx="480" cy="270" r="400"/>
<circle cx="480" cy="270" r="500"/>
</g>
<!-- PSIX Large Text Logo -->
<text x="850" y="295" font-family="'Arial Black', 'Impact', sans-serif" font-size="130" font-weight="900" fill="#5db900" opacity="0.4" text-anchor="end" letter-spacing="-3">psix</text>
<!-- ================= TOP BAR (STATUS) ================= -->
<rect x="0" y="0" width="960" height="22" fill="url(#topBarGrad)" />
<!-- Top Left: Battery & CPU -->
<g transform="translate(15, 5)">
<!-- Battery Outline -->
<rect x="0" y="2" width="20" height="9" fill="none" stroke="#FFFFFF" stroke-width="1.2"/>
<rect x="20" y="4" width="2" height="5" fill="#FFFFFF"/>
<!-- Battery Fill -->
<rect x="1" y="3" width="18" height="7" fill="#FFCC00"/>
</g>
<text x="45" y="16" font-family="sans-serif" font-size="12" fill="#AAAAAA" font-weight="bold">100%</text>
<!-- Small square icon -->
<rect x="85" y="6" width="8" height="8" fill="none" stroke="#FFFFFF" stroke-width="1.5" rx="1"/>
<text x="100" y="16" font-family="sans-serif" font-size="12" fill="#888888" font-weight="bold">265 MHZ</text>
<!-- Top Center: Version -->
<text x="480" y="16" font-family="sans-serif" font-size="14" fill="#FFFFFF" text-anchor="middle" font-weight="bold" letter-spacing="1">Version <tspan fill="#FFCC00">1.1</tspan> Public</text>
<!-- Top Right: Time/Date -->
<g transform="translate(640, 4)">
<!-- Clock Icon -->
<circle cx="8" cy="7" r="6" fill="none" stroke="#888888" stroke-width="1.5"/>
<path d="M8,3 L8,7 L11,9" fill="none" stroke="#888888" stroke-width="1.5"/>
</g>
<text x="665" y="16" font-family="sans-serif" font-size="13" fill="#888888" font-weight="bold" letter-spacing="0.5">11:20 November 23, 2024</text>
<!-- ================= TOP NAVIGATION TABS ================= -->
<g transform="translate(0, 22)">
<!-- Overall Tab Bar Base -->
<path d="M 0 0 L 270 0 C 285 0 295 24 310 24 L 0 24 Z" fill="#FFFFFF" filter="url(#dropShadow)" />
<!-- Tab Separators & Outlines -->
<path d="M 0 0 L 270 0 C 285 0 295 24 310 24 L 0 24 Z" fill="none" stroke="#888888" stroke-width="1"/>
<!-- MS0 Active Tab -->
<path d="M 0 0 L 70 0 L 60 24 L 0 24 Z" fill="#4A4A4A" stroke="#333333" stroke-width="1"/>
<!-- Tab Texts -->
<text x="32" y="17" font-family="'Courier New', monospace, sans-serif" font-size="13" font-weight="bold" fill="#FFFFFF" text-anchor="middle">MS0</text>
<text x="105" y="17" font-family="'Courier New', monospace, sans-serif" font-size="13" font-weight="bold" fill="#666666" text-anchor="middle">UMD</text>
<line x1="140" y1="4" x2="140" y2="20" stroke="#CCCCCC" stroke-width="1.5"/>
<text x="175" y="17" font-family="'Courier New', monospace, sans-serif" font-size="13" font-weight="bold" fill="#666666" text-anchor="middle">MOD</text>
<line x1="210" y1="4" x2="210" y2="20" stroke="#CCCCCC" stroke-width="1.5"/>
<text x="245" y="17" font-family="'Courier New', monospace, sans-serif" font-size="13" font-weight="bold" fill="#666666" text-anchor="middle">NET</text>
</g>
<!-- ================= DESKTOP ICONS ================= -->
<!-- 1. My PSP -->
<g transform="translate(60, 80)">
<g filter="url(#dropShadow)">
<!-- PSP Device Shape -->
<rect x="5" y="5" width="46" height="22" rx="11" fill="#4fa5e2" stroke="#222222" stroke-width="2"/>
<!-- Screen -->
<rect x="15" y="9" width="22" height="14" fill="#E0F7FA" stroke="#222222" stroke-width="1.5"/>
<!-- D-Pad / Buttons -->
<circle cx="11" cy="16" r="1.5" fill="#FFFFFF"/>
<circle cx="41" cy="16" r="1.5" fill="#FFFFFF"/>
</g>
<text x="28" y="65" font-family="sans-serif" font-size="15" fill="#FFFFFF" text-anchor="middle" filter="url(#textShadow)">My PSP</text>
</g>
<!-- 2. PSPace -->
<g transform="translate(200, 65)">
<use href="#file-icon" />
<text x="20" y="80" font-family="sans-serif" font-size="15" fill="#FFFFFF" text-anchor="middle" filter="url(#textShadow)">PSPace</text>
</g>
<!-- 3. JzBMSPlayer -->
<g transform="translate(60, 210)">
<use href="#file-icon" />
<text x="20" y="80" font-family="sans-serif" font-size="15" fill="#FFFFFF" text-anchor="middle" filter="url(#textShadow)">
<tspan x="20" dy="0">JzBMSPlaye</tspan>
<tspan x="20" dy="18">r</tspan>
</text>
</g>
<!-- 4. PSP-Quake1_HW-UM -->
<g transform="translate(60, 350)">
<use href="#file-icon" />
<text x="20" y="80" font-family="sans-serif" font-size="15" fill="#FFFFFF" text-anchor="middle" filter="url(#textShadow)">
<tspan x="20" dy="0">PSP-Quake1</tspan>
<tspan x="20" dy="18">_HW-UM</tspan>
</text>
</g>
<!-- ================= BOTTOM CONTROL BAR ================= -->
<!-- Dark Background / Border Base -->
<path d="M 0 460 L 380 460 L 400 500 L 560 500 L 580 460 L 960 460 L 960 540 L 0 540 Z" fill="#222222" />
<!-- Main Metallic Body -->
<path d="M 0 475
L 380 475
C 390 475 395 503 405 503
L 555 503
C 565 503 570 475 580 475
L 960 475
L 960 540
L 0 540 Z" fill="url(#metalGrad)" stroke="#FFFFFF" stroke-width="1"/>
<!-- Top highlight inner stroke on metal -->
<path d="M 0 477 L 378 477 C 388 477 395 505 405 505 L 555 505 C 565 505 572 477 582 477 L 960 477" fill="none" stroke="#FFFFFF" stroke-width="2" opacity="0.8"/>
<!-- Bottom dark metallic strip -->
<rect x="0" y="515" width="960" height="25" fill="url(#metalBase)" />
<line x1="0" y1="515" x2="960" y2="515" stroke="#444" stroke-width="2"/>
<!-- Left Button Block (L) -->
<g transform="translate(0, 485)">
<path d="M 0 0 L 70 0 L 90 30 L 0 30 Z" fill="#333333" stroke="#111111" stroke-width="1"/>
<!-- Highlight -->
<path d="M 0 1 L 69 1 L 88 29" fill="none" stroke="#666666" stroke-width="1.5"/>
<text x="20" y="19" font-family="sans-serif" font-size="14" font-weight="bold" fill="#FFFFFF" filter="url(#dropShadow)">&lt; L</text>
</g>
<!-- Right Button Block (R) -->
<g transform="translate(870, 485)">
<path d="M 90 0 L 20 0 L 0 30 L 90 30 Z" fill="#333333" stroke="#111111" stroke-width="1"/>
<!-- Highlight -->
<path d="M 90 1 L 21 1 L 2 29" fill="none" stroke="#666666" stroke-width="1.5"/>
<text x="50" y="19" font-family="sans-serif" font-size="14" font-weight="bold" fill="#FFFFFF" filter="url(#dropShadow)">R &gt;</text>
</g>
<!-- HTTP://PSIXONLINE.COM Text Label -->
<!-- Subtle inset box for URL -->
<rect x="65" y="482" width="280" height="18" fill="none" rx="3"/>
<text x="80" y="495" font-family="'Courier New', monospace, sans-serif" font-size="14" font-weight="bold" fill="#999999" letter-spacing="1">HTTP://PSIXONLINE.COM</text>
<!-- Right Side Tabs: AUDIO VIDEO IMAGE FILE -->
<!-- Background inset for right tabs -->
<path d="M 680 475 L 660 495 L 960 495 L 960 475 Z" fill="#F5F5F5" opacity="0.5"/>
<g transform="translate(685, 488)">
<text x="15" y="0" font-family="sans-serif" font-size="11" font-weight="bold" fill="#777777" letter-spacing="1">AUDIO</text>
<line x1="60" y1="-10" x2="60" y2="4" stroke="#BBBBBB" stroke-width="1.5"/>
<text x="75" y="0" font-family="sans-serif" font-size="11" font-weight="bold" fill="#777777" letter-spacing="1">VIDEO</text>
<line x1="120" y1="-10" x2="120" y2="4" stroke="#BBBBBB" stroke-width="1.5"/>
<text x="135" y="0" font-family="sans-serif" font-size="11" font-weight="bold" fill="#777777" letter-spacing="1">IMAGE</text>
<line x1="180" y1="-10" x2="180" y2="4" stroke="#BBBBBB" stroke-width="1.5"/>
<text x="195" y="0" font-family="sans-serif" font-size="11" font-weight="bold" fill="#777777" letter-spacing="1">FILE</text>
</g>
<!-- Center Dark Screen -->
<g transform="translate(415, 470)" filter="url(#dropShadow)">
<rect x="0" y="0" width="130" height="34" rx="2" fill="url(#gridPattern)" stroke="#111111" stroke-width="2"/>
<rect x="0" y="0" width="130" height="34" rx="2" fill="#000000" opacity="0.3"/>
<!-- Highlight overlay -->
<rect x="1" y="1" width="128" height="10" fill="#FFFFFF" opacity="0.1" rx="2"/>
<!-- Decorative side dots on the screen frame -->
<circle cx="-10" cy="10" r="1.5" fill="#666"/>
<circle cx="-10" cy="17" r="1.5" fill="#666"/>
<circle cx="-10" cy="24" r="1.5" fill="#666"/>
<circle cx="140" cy="10" r="1.5" fill="#666"/>
<circle cx="140" cy="17" r="1.5" fill="#666"/>
<circle cx="140" cy="24" r="1.5" fill="#666"/>
</g>
<!-- Central Media Buttons Below Screen -->
<g transform="translate(422, 517)">
<!-- Pause -->
<circle cx="0" cy="0" r="7" fill="#EEEEEE" stroke="#999999" stroke-width="1"/>
<rect x="-2" y="-3" width="1.5" height="6" fill="#555555"/>
<rect x="1" y="-3" width="1.5" height="6" fill="#555555"/>
<!-- Prev -->
<circle cx="20" cy="0" r="7" fill="#EEEEEE" stroke="#999999" stroke-width="1"/>
<polygon points="1,-3 -3,0 1,3" fill="#555"/>
<rect x="-4" y="-3" width="1" height="6" fill="#555"/>
<!-- Play -->
<circle cx="40" cy="0" r="8" fill="#FFFFFF" stroke="#666666" stroke-width="1" filter="url(#dropShadow)"/>
<polygon points="-2,-4 4,0 -2,4" fill="#333333"/>
<!-- Next -->
<circle cx="60" cy="0" r="7" fill="#EEEEEE" stroke="#999999" stroke-width="1"/>
<polygon points="-1,-3 3,0 -1,3" fill="#555"/>
<rect x="4" y="-3" width="1" height="6" fill="#555"/>
<!-- Stop -->
<circle cx="80" cy="0" r="7" fill="#EEEEEE" stroke="#999999" stroke-width="1"/>
<rect x="-2.5" y="-2.5" width="5" height="5" fill="#555555"/>
</g>
<!-- Right Bottom Status Block (USB & Bars) -->
<g transform="translate(615, 510)">
<!-- USB Box -->
<rect x="0" y="5" width="38" height="25" fill="#FFFFFF" rx="3" stroke="#999999"/>
<!-- Small Green Arrow inside USB Box -->
<polygon points="19,7 23,12 15,12" fill="#44AA00"/>
<text x="19" y="23" font-family="sans-serif" font-size="10" font-weight="bold" fill="#333333" text-anchor="middle">USB</text>
<!-- Loading/Status Bars -->
<rect x="145" y="10" width="100" height="15" fill="#FFFFFF" stroke="#AAAAAA" stroke-width="1"/>
<rect x="148" y="13" width="22" height="9" fill="#00AEEF"/>
<rect x="173" y="13" width="22" height="9" fill="#EEEEEE"/>
<rect x="198" y="13" width="22" height="9" fill="#EEEEEE"/>
<rect x="223" y="13" width="18" height="9" fill="#EEEEEE"/>
</g>
<!-- ================= MOUSE CURSOR ================= -->
<!-- Positioned roughly in the center of the UI -->
<g transform="translate(480, 272)" filter="url(#dropShadow)">
<path d="M 0 0 L 15 15 L 8 15 L 12 24 L 8 26 L 4 17 L -2 22 Z" fill="#FFFFFF" stroke="#000000" 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