Skip to content

Instantly share code, notes, and snippets.

@corysimmons

corysimmons/gist:ab50b7be826a8ec077b3583d23ea7715

Created February 21, 2026 16:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save corysimmons/ab50b7be826a8ec077b3583d23ea7715 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save corysimmons/ab50b7be826a8ec077b3583d23ea7715 to your computer and use it in GitHub Desktop.
Download ZIP
Black MacBook Pro SVG 100% expanded
Raw
gistfile1.txt
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="856" viewBox="0 0 312.6 446.4">
<defs>
<!-- Space Black gradient for body -->
<linearGradient id="bodyGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#1a1a1c"/>
<stop offset="50%" stop-color="#161617"/>
<stop offset="100%" stop-color="#1a1a1c"/>
</linearGradient>
<!-- Screen bezel gradient -->
<linearGradient id="bezelGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0a0a0a"/>
<stop offset="100%" stop-color="#111112"/>
</linearGradient>
<!-- Display gradient (off state) -->
<linearGradient id="screenGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0e1117"/>
<stop offset="30%" stop-color="#0a0d12"/>
<stop offset="70%" stop-color="#0c1018"/>
<stop offset="100%" stop-color="#080b0f"/>
</linearGradient>
<!-- Trackpad gradient -->
<linearGradient id="trackpadGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1a1a1c"/>
<stop offset="50%" stop-color="#151516"/>
<stop offset="100%" stop-color="#1a1a1c"/>
</linearGradient>
<!-- Key gradient -->
<linearGradient id="keyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0d0d0e"/>
<stop offset="100%" stop-color="#080809"/>
</linearGradient>
<!-- Subtle aluminum sheen -->
<linearGradient id="sheen" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="rgba(255,255,255,0)" />
<stop offset="48%" stop-color="rgba(255,255,255,0)" />
<stop offset="50%" stop-color="rgba(255,255,255,0.03)" />
<stop offset="52%" stop-color="rgba(255,255,255,0)" />
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
</linearGradient>
<!-- Notch shape -->
<clipPath id="screenClip">
<rect x="5.2" y="8" width="302.2" height="196.5" rx="2"/>
</clipPath>
<!-- Camera notch cutout for screen -->
<clipPath id="notchClip">
<path d="M0,0 H312.6 V221.2 H0 Z M127.3,8 Q127.3,5 130.3,5 H182.3 Q185.3,5 185.3,8 V8 H127.3 Z"/>
</clipPath>
</defs>
<!-- ==================== SCREEN LID BODY ==================== -->
<rect x="0" y="0" width="312.6" height="221.2" rx="8" ry="8" fill="url(#bodyGrad)" stroke="#2a2a2c" stroke-width="0.3"/>
<!-- ==================== SCREEN LID (top half) ==================== -->
<g transform="translate(0, 0)">
<!-- Screen bezel area -->
<rect x="3.75" y="3.75" width="305.1" height="213.7" rx="4" ry="4" fill="url(#bezelGrad)"/>
<!-- Active display area: uniform 5.25mm padding all around -->
<rect x="5.25" y="5.25" width="302.1" height="210.7" rx="2.5" ry="2.5" fill="url(#screenGrad)"/>
<!-- Camera notch -->
<rect x="131" y="3.75" width="50.6" height="4.5" rx="0" ry="0" fill="url(#bezelGrad)"/>
<rect x="131" y="5.25" width="50.6" height="3" rx="0" ry="0" fill="url(#bezelGrad)"/>
<!-- Notch rounded bottom -->
<path d="M131,8.25 L131,6.25 Q131,8.25 133,8.25 Z" fill="url(#bezelGrad)"/>
<path d="M181.6,8.25 L181.6,6.25 Q181.6,8.25 179.6,8.25 Z" fill="url(#bezelGrad)"/>
<rect x="133" y="3.75" width="46.6" height="4.5" rx="0" ry="0" fill="url(#bezelGrad)"/>
<!-- Camera dot -->
<circle cx="156.3" cy="6.5" r="1.2" fill="#0a0a0a" stroke="#1a1a1a" stroke-width="0.2"/>
<circle cx="156.3" cy="6.5" r="0.5" fill="#1a2030"/>
<!-- Camera indicator light (green, subtle) -->
<circle cx="156.3" cy="6.5" r="0.25" fill="#0a3a0a" opacity="0.5"/>
<!-- Subtle screen reflection lines -->
<line x1="30" y1="40" x2="280" y2="38" stroke="rgba(255,255,255,0.008)" stroke-width="0.3"/>
<line x1="30" y1="110" x2="280" y2="108" stroke="rgba(255,255,255,0.005)" stroke-width="0.3"/>
<!-- Apple logo (centered on lid) - visible from behind but showing subtle imprint area -->
<!-- On the screen side we see the display, the logo is on the back -->
</g>
<!-- ==================== HINGE ==================== -->
<rect x="23.4" y="221.2" width="265.7" height="4" rx="0.5" ry="0.5" fill="#0a0a0b"/>
<!-- ==================== KEYBOARD BASE (bottom half) ==================== -->
<g transform="translate(0, 225.2)">
<!-- Base body -->
<rect x="0" y="0" width="312.6" height="221.2" rx="8" ry="8" fill="url(#bodyGrad)" stroke="#2a2a2c" stroke-width="0.3"/>
<!-- Base inherits from unified body -->
<!-- Front lip / edge (thinner at front) -->
<path d="M8,221.2 Q0,221.2 0,213.2 L0,218 Q0,221.2 8,221.2 Z" fill="rgba(255,255,255,0.01)"/>
<!-- ==================== KEYBOARD AREA ==================== -->
<!-- Keyboard sits in a recessed black area -->
<!-- Keyboard zone: roughly 275mm wide, centered, starting ~18mm from top -->
<rect x="18" y="18" width="276.6" height="95" rx="3" ry="3" fill="#0a0a0b" opacity="0.5"/>
<!-- FUNCTION KEY ROW (12 full-height function keys + esc + Touch ID) -->
<!-- Key dimensions: ~16mm wide, 8mm tall for function row, 1mm gap -->
<!-- Row Y: 20mm from top of base -->
<!-- Esc key -->
<rect x="20" y="20" width="20" height="8" rx="1.2" ry="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="30" y="25.5" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="2.8" text-anchor="middle">esc</text>
<!-- F1-F12 keys -->
<g id="fnKeys">
<!-- F1 --> <rect x="42" y="20" width="17.8" height="8" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="50.9" y="25.2" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.2" text-anchor="middle">F1</text>
<!-- F2 --> <rect x="61.3" y="20" width="17.8" height="8" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="70.2" y="25.2" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.2" text-anchor="middle">F2</text>
<!-- F3 --> <rect x="80.6" y="20" width="17.8" height="8" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="89.5" y="25.2" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.2" text-anchor="middle">F3</text>
<!-- F4 --> <rect x="99.9" y="20" width="17.8" height="8" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="108.8" y="25.2" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.2" text-anchor="middle">F4</text>
<!-- F5 --> <rect x="119.2" y="20" width="17.8" height="8" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="128.1" y="25.2" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.2" text-anchor="middle">F5</text>
<!-- F6 --> <rect x="138.5" y="20" width="17.8" height="8" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="147.4" y="25.2" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.2" text-anchor="middle">F6</text>
<!-- F7 --> <rect x="157.8" y="20" width="17.8" height="8" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="166.7" y="25.2" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.2" text-anchor="middle">F7</text>
<!-- F8 --> <rect x="177.1" y="20" width="17.8" height="8" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="186" y="25.2" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.2" text-anchor="middle">F8</text>
<!-- F9 --> <rect x="196.4" y="20" width="17.8" height="8" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="205.3" y="25.2" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.2" text-anchor="middle">F9</text>
<!-- F10 --> <rect x="215.7" y="20" width="17.8" height="8" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="224.6" y="25.2" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.2" text-anchor="middle">F10</text>
<!-- F11 --> <rect x="235" y="20" width="17.8" height="8" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="243.9" y="25.2" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.2" text-anchor="middle">F11</text>
<!-- F12 --> <rect x="254.3" y="20" width="17.8" height="8" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="263.2" y="25.2" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.2" text-anchor="middle">F12</text>
</g>
<!-- Touch ID (power button, top right) -->
<rect x="274" y="20" width="18" height="8" rx="1.2" ry="1.2" fill="#0b0b0c" stroke="#1a1a1b" stroke-width="0.2"/>
<circle cx="283" cy="24" r="2.5" fill="none" stroke="#222" stroke-width="0.3"/>
<!-- ==================== NUMBER ROW ==================== -->
<!-- Standard key: ~16.5mm wide, 15mm tall, 1.5mm gap -->
<!-- Row starts at Y=30 -->
<g id="numberRow" transform="translate(0, 30)">
<!-- Backtick --> <rect x="20" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="28.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">~</text>
<!-- 1 --> <rect x="38" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="46.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">1</text>
<!-- 2 --> <rect x="56" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="64.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">2</text>
<!-- 3 --> <rect x="74" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="82.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">3</text>
<!-- 4 --> <rect x="92" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="100.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">4</text>
<!-- 5 --> <rect x="110" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="118.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">5</text>
<!-- 6 --> <rect x="128" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="136.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">6</text>
<!-- 7 --> <rect x="146" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="154.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">7</text>
<!-- 8 --> <rect x="164" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="172.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">8</text>
<!-- 9 --> <rect x="182" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="190.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">9</text>
<!-- 0 --> <rect x="200" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="208.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">0</text>
<!-- - --> <rect x="218" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="226.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">–</text>
<!-- = --> <rect x="236" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="244.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">=</text>
<!-- Delete --> <rect x="254" y="0" width="38" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="273" y="9" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.8" text-anchor="middle">delete</text>
</g>
<!-- ==================== QWERTY ROW ==================== -->
<g id="qwertyRow" transform="translate(0, 47)">
<!-- Tab --> <rect x="20" y="0" width="25" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="32.5" y="9" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.8" text-anchor="middle">tab</text>
<!-- Q --> <rect x="46.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="54.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">Q</text>
<!-- W --> <rect x="64.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="72.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">W</text>
<!-- E --> <rect x="82.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="90.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">E</text>
<!-- R --> <rect x="100.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="108.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">R</text>
<!-- T --> <rect x="118.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="126.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">T</text>
<!-- Y --> <rect x="136.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="144.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">Y</text>
<!-- U --> <rect x="154.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="162.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">U</text>
<!-- I --> <rect x="172.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="180.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">I</text>
<!-- O --> <rect x="190.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="198.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">O</text>
<!-- P --> <rect x="208.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="216.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">P</text>
<!-- [ --> <rect x="226.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="234.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">[</text>
<!-- ] --> <rect x="244.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="252.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">]</text>
<!-- \ --> <rect x="262.5" y="0" width="29.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="277.25" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">\</text>
</g>
<!-- ==================== HOME ROW (ASDF) ==================== -->
<g id="homeRow" transform="translate(0, 64)">
<!-- Caps Lock --> <rect x="20" y="0" width="29" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="34.5" y="9" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.8" text-anchor="middle">caps lock</text>
<!-- Caps indicator dot -->
<circle cx="24" cy="3.5" r="0.8" fill="#1a1a1b" stroke="#333" stroke-width="0.15"/>
<!-- A --> <rect x="50.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="58.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">A</text>
<!-- S --> <rect x="68.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="76.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">S</text>
<!-- D --> <rect x="86.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="94.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">D</text>
<!-- F --> <rect x="104.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="112.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">F</text>
<!-- G --> <rect x="122.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="130.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">G</text>
<!-- H --> <rect x="140.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="148.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">H</text>
<!-- J --> <rect x="158.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="166.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">J</text>
<!-- K --> <rect x="176.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="184.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">K</text>
<!-- L --> <rect x="194.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="202.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">L</text>
<!-- ; --> <rect x="212.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="220.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">;</text>
<!-- ' --> <rect x="230.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="238.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">'</text>
<!-- Return --> <rect x="248.5" y="0" width="43.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="270.25" y="9" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.8" text-anchor="middle">return</text>
</g>
<!-- ==================== ZXCV ROW ==================== -->
<g id="zxcvRow" transform="translate(0, 81)">
<!-- Left Shift --> <rect x="20" y="0" width="38" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="39" y="9" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.8" text-anchor="middle">shift</text>
<!-- Z --> <rect x="59.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="67.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">Z</text>
<!-- X --> <rect x="77.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="85.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">X</text>
<!-- C --> <rect x="95.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="103.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">C</text>
<!-- V --> <rect x="113.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="121.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">V</text>
<!-- B --> <rect x="131.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="139.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">B</text>
<!-- N --> <rect x="149.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="157.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">N</text>
<!-- M --> <rect x="167.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="175.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">M</text>
<!-- , --> <rect x="185.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="193.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">,</text>
<!-- . --> <rect x="203.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="211.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">.</text>
<!-- / --> <rect x="221.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="229.75" y="9" fill="#555" font-family="SF Pro, Helvetica, Arial" font-size="3.5" text-anchor="middle">/</text>
<!-- Right Shift --> <rect x="239.5" y="0" width="52.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="265.75" y="9" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.8" text-anchor="middle">shift</text>
</g>
<!-- ==================== BOTTOM ROW (modifiers + space + arrows) ==================== -->
<g id="bottomRow" transform="translate(0, 98)">
<!-- fn --> <rect x="20" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="28.25" y="9" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.5" text-anchor="middle">fn</text>
<!-- globe icon (small circle) -->
<circle cx="28.25" cy="5" r="1.8" fill="none" stroke="#444" stroke-width="0.3"/>
<line x1="26.45" y1="5" x2="30.05" y2="5" stroke="#444" stroke-width="0.2"/>
<ellipse cx="28.25" cy="5" rx="0.9" ry="1.8" fill="none" stroke="#444" stroke-width="0.2"/>
<!-- Control --> <rect x="38" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="46.25" y="9" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.5" text-anchor="middle">control</text>
<!-- Option --> <rect x="56" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="64.25" y="9" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.5" text-anchor="middle">option</text>
<!-- Command (left) --> <rect x="74" y="0" width="22" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="85" y="9.5" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="3" text-anchor="middle">⌘</text>
<!-- Space bar --> <rect x="97.5" y="0" width="100" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<!-- Command (right) --> <rect x="199" y="0" width="22" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="210" y="9.5" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="3" text-anchor="middle">⌘</text>
<!-- Option (right) --> <rect x="222.5" y="0" width="16.5" height="15" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="230.75" y="9" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="2.5" text-anchor="middle">option</text>
<!-- Arrow keys (inverted T) -->
<!-- Left --> <rect x="243" y="7.5" width="16.5" height="7.5" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="251.25" y="13" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="3" text-anchor="middle">◀</text>
<!-- Up --> <rect x="261" y="0" width="16.5" height="7.5" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="269.25" y="5.5" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="3" text-anchor="middle">▲</text>
<!-- Down --> <rect x="261" y="7.5" width="16.5" height="7.5" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="269.25" y="13" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="3" text-anchor="middle">▼</text>
<!-- Right --> <rect x="279" y="7.5" width="13" height="7.5" rx="1.2" fill="url(#keyGrad)" stroke="#1a1a1b" stroke-width="0.2"/>
<text x="285.5" y="13" fill="#444" font-family="SF Pro, Helvetica, Arial" font-size="3" text-anchor="middle">▶</text>
</g>
<!-- ==================== SPEAKER GRILLES ==================== -->
<!-- Left speaker grille (between keyboard and edge) -->
<g opacity="0.3">
<g transform="translate(20, 116)">
<!-- Rows of tiny holes -->
<g fill="#0a0a0a">
<!-- Generate speaker grille dots in rows -->
<circle cx="2" cy="2" r="0.3"/><circle cx="4" cy="2" r="0.3"/><circle cx="6" cy="2" r="0.3"/><circle cx="8" cy="2" r="0.3"/><circle cx="10" cy="2" r="0.3"/>
<circle cx="12" cy="2" r="0.3"/><circle cx="14" cy="2" r="0.3"/><circle cx="16" cy="2" r="0.3"/><circle cx="18" cy="2" r="0.3"/><circle cx="20" cy="2" r="0.3"/>
<circle cx="2" cy="4" r="0.3"/><circle cx="4" cy="4" r="0.3"/><circle cx="6" cy="4" r="0.3"/><circle cx="8" cy="4" r="0.3"/><circle cx="10" cy="4" r="0.3"/>
<circle cx="12" cy="4" r="0.3"/><circle cx="14" cy="4" r="0.3"/><circle cx="16" cy="4" r="0.3"/><circle cx="18" cy="4" r="0.3"/><circle cx="20" cy="4" r="0.3"/>
<circle cx="2" cy="6" r="0.3"/><circle cx="4" cy="6" r="0.3"/><circle cx="6" cy="6" r="0.3"/><circle cx="8" cy="6" r="0.3"/><circle cx="10" cy="6" r="0.3"/>
<circle cx="12" cy="6" r="0.3"/><circle cx="14" cy="6" r="0.3"/><circle cx="16" cy="6" r="0.3"/><circle cx="18" cy="6" r="0.3"/><circle cx="20" cy="6" r="0.3"/>
</g>
</g>
<!-- Right speaker grille -->
<g transform="translate(270, 116)">
<g fill="#0a0a0a">
<circle cx="2" cy="2" r="0.3"/><circle cx="4" cy="2" r="0.3"/><circle cx="6" cy="2" r="0.3"/><circle cx="8" cy="2" r="0.3"/><circle cx="10" cy="2" r="0.3"/>
<circle cx="12" cy="2" r="0.3"/><circle cx="14" cy="2" r="0.3"/><circle cx="16" cy="2" r="0.3"/><circle cx="18" cy="2" r="0.3"/><circle cx="20" cy="2" r="0.3"/>
<circle cx="2" cy="4" r="0.3"/><circle cx="4" cy="4" r="0.3"/><circle cx="6" cy="4" r="0.3"/><circle cx="8" cy="4" r="0.3"/><circle cx="10" cy="4" r="0.3"/>
<circle cx="12" cy="4" r="0.3"/><circle cx="14" cy="4" r="0.3"/><circle cx="16" cy="4" r="0.3"/><circle cx="18" cy="4" r="0.3"/><circle cx="20" cy="4" r="0.3"/>
<circle cx="2" cy="6" r="0.3"/><circle cx="4" cy="6" r="0.3"/><circle cx="6" cy="6" r="0.3"/><circle cx="8" cy="6" r="0.3"/><circle cx="10" cy="6" r="0.3"/>
<circle cx="12" cy="6" r="0.3"/><circle cx="14" cy="6" r="0.3"/><circle cx="16" cy="6" r="0.3"/><circle cx="18" cy="6" r="0.3"/><circle cx="20" cy="6" r="0.3"/>
</g>
</g>
</g>
<!-- ==================== FORCE TOUCH TRACKPAD ==================== -->
<!-- Trackpad: ~130mm wide, ~83mm tall, centered -->
<rect x="91.3" y="126" width="130" height="83" rx="5" ry="5" fill="url(#trackpadGrad)" stroke="#2a2a2c" stroke-width="0.3"/>
<!-- Trackpad inner subtle border -->
<rect x="91.8" y="126.5" width="129" height="82" rx="4.7" ry="4.7" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="0.3"/>
<!-- ==================== PORT INDICATORS (side edges) ==================== -->
<!-- Left side ports (3x Thunderbolt 4 USB-C + MagSafe) -->
<!-- MagSafe -->
<rect x="-0.15" y="25" width="0.8" height="8" rx="0.2" fill="#0e0e0f" stroke="#222" stroke-width="0.15"/>
<!-- USB-C 1 -->
<rect x="-0.15" y="40" width="0.8" height="5" rx="0.2" fill="#0e0e0f" stroke="#222" stroke-width="0.15"/>
<!-- USB-C 2 -->
<rect x="-0.15" y="50" width="0.8" height="5" rx="0.2" fill="#0e0e0f" stroke="#222" stroke-width="0.15"/>
<!-- Right side ports -->
<!-- USB-C 3 -->
<rect x="311.95" y="30" width="0.8" height="5" rx="0.2" fill="#0e0e0f" stroke="#222" stroke-width="0.15"/>
<!-- HDMI -->
<rect x="311.95" y="42" width="0.8" height="7" rx="0.2" fill="#0e0e0f" stroke="#222" stroke-width="0.15"/>
<!-- SD card -->
<rect x="311.95" y="55" width="0.8" height="9" rx="0.2" fill="#0e0e0f" stroke="#222" stroke-width="0.15"/>
<!-- Headphone jack -->
<circle cx="312.6" cy="72" r="1.5" fill="#0e0e0f" stroke="#222" stroke-width="0.15"/>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment