THI/tertiary
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make diagrams self-contained and lead the README with them

Browse Source 
The SVGs relied on stylesheet classes supplied by the tool that rendered them
- outside it they were black boxes with invisible text. Each now carries its
own <style> block with light and dark palettes.

Also regenerates the overview, which still showed the old row-staggered 36/39
halves, and adds a licence section: nothing is chosen yet, so default
copyright applies.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
William RickertandClaude Opus 5 committed 2026-08-27 15:12:17 -05:00
1 parent 5e527bb7b9
commit fd1ae511ca
8 files changed
+561 -408
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/three-board-overview.svg
+129 -111
View File
@@ -1,115 +1,133 @@
<svg width="100%" viewBox="0 0 680 330" role="img" xmlns="http://www.w3.org/2000/svg">
<title>All three boards to scale, split from a 104</title>
<desc>Left half thirty-six keys, right half thirty-nine, numpad twenty-five, all drawn at the same key spacing.</desc>
<style>
text{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;fill:#1f2328}
.t{font-size:14px;font-weight:400}.ts{font-size:12px;font-weight:400}.th{font-size:14px;font-weight:500}
rect,circle{stroke-width:.6}
.c-teal rect,.c-teal circle{fill:#DFF3F0;stroke:#0F857B}.c-teal text{fill:#0A5750}
.c-purple rect,.c-purple circle{fill:#EDE7FA;stroke:#6D4FC4}.c-purple text{fill:#3A2775}
.c-coral rect,.c-coral circle{fill:#FCEAE4;stroke:#D8613F}.c-coral text{fill:#83321C}
.c-amber rect,.c-amber circle{fill:#FDF1DC;stroke:#C08A21}.c-amber text{fill:#6E4C08}
.c-gray rect,.c-gray circle{fill:#EFEFEF;stroke:#8A8A8A}.c-gray text{fill:#3A3A3A}
@media (prefers-color-scheme:dark){
text{fill:#e6edf3}
.c-teal rect,.c-teal circle{fill:#0C4F49;stroke:#5FC9BF}.c-teal text{fill:#CFF0EC}
.c-purple rect,.c-purple circle{fill:#33246B;stroke:#A992EE}.c-purple text{fill:#E2D9FA}
.c-coral rect,.c-coral circle{fill:#6E2B18;stroke:#F0906F}.c-coral text{fill:#FBDDD2}
.c-amber rect,.c-amber circle{fill:#5C3F06;stroke:#E0AE4A}.c-amber text{fill:#F8E7C4}
.c-gray rect,.c-gray circle{fill:#3A3A3A;stroke:#9A9A9A}.c-gray text{fill:#E0E0E0}
}
</style>
<title>All three boards to scale</title>
<desc>Left half 34 keys, right half 41, numpad 25, all column-staggered and drawn at the same key spacing.</desc>
<text class="th" x="18" y="24">All three boards, same scale</text>
<text class="ts" x="18" y="44">100 of a 104 layout&#8217;s keys have a physical home. Only Insert, PrtSc, ScrLk and Pause need a layer.</text>
<g class="c-teal"><rect x="20" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="70" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="95" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="120" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="145" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="182" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="208" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="20" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="45" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="70" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="95" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="120" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="145" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="170" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="20" y="146" width="34" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="58" y="146" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="82" y="146" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="108" y="146" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="132" y="146" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="158" y="146" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="20" y="172" width="41" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="64" y="172" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="89" y="172" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="114" y="172" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="139" y="172" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="164" y="172" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="20" y="196" width="53" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="76" y="196" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="101" y="196" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="126" y="196" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="151" y="196" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="176" y="196" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="20" y="222" width="28" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="51" y="222" width="28" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="82" y="222" width="28" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-teal"><rect x="114" y="222" width="60" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="315" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="340" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="377" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="402" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="427" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="452" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="277" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="302" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="327" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="352" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="377" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="402" y="122" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="427" y="122" width="47" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="265" y="146" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="290" y="146" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="315" y="146" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="340" y="146" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="365" y="146" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="390" y="146" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="415" y="146" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="440" y="146" width="34" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="271" y="172" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="296" y="172" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="321" y="172" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="346" y="172" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="371" y="172" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="396" y="172" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="421" y="172" width="53" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="284" y="196" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="308" y="196" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="334" y="196" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="358" y="196" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="384" y="196" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="408" y="196" width="66" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="258" y="222" width="91" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="352" y="222" width="28" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="384" y="222" width="28" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="415" y="222" width="28" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-purple"><rect x="446" y="222" width="28" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="503" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="503" y="109" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="503" y="134" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="503" y="159" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="503" y="184" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="528" y="109" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="528" y="134" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="528" y="159" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="528" y="184" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="553" y="109" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="553" y="134" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="553" y="159" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="578" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="578" y="109" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="578" y="134" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="578" y="159" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="603" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="603" y="109" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="603" y="134" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="603" y="159" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="603" y="184" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="553" y="184" width="47" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="628" y="84" width="22" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="628" y="109" width="22" height="47" rx="3" stroke-width="0.5"/></g>
<g class="c-coral"><rect x="628" y="159" width="22" height="47" rx="3" stroke-width="0.5"/></g>
<g class="c-gray"><rect x="528" y="84" width="47" height="22" rx="3" stroke-width="0.5"/></g>
<g class="c-gray"><circle cx="552" cy="96" r="9" stroke-width="0.5"/></g>
<text class="th" x="126" y="280" text-anchor="middle">Left half</text>
<text class="ts" x="126" y="298" text-anchor="middle">36 keys</text>
<text class="th" x="368" y="280" text-anchor="middle">Right half</text>
<text class="ts" x="368" y="298" text-anchor="middle">39 keys</text>
<text class="th" x="578" y="280" text-anchor="middle">Numpad</text>
<text class="ts" x="578" y="298" text-anchor="middle">25 + knob</text>
<text class="ts" x="18" y="322">The halves are not mirrors &#8212; 36 vs 39 keys means two separate board designs, not one file flipped.</text>
<g class="c-teal"><rect x="22" y="86" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="22" y="116" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="22" y="139" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="22" y="162" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="22" y="185" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="45" y="84" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="45" y="115" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="45" y="138" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="45" y="161" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="45" y="184" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="68" y="79" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="68" y="110" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="68" y="133" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="68" y="156" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="68" y="179" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="91" y="76" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="91" y="107" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="91" y="130" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="91" y="153" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="91" y="176" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="114" y="78" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="114" y="109" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="114" y="132" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="114" y="155" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="114" y="178" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="137" y="82" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="137" y="113" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="137" y="136" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="137" y="159" width="20" height="20" rx="3"/></g>
<g class="c-teal"><rect x="137" y="182" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="58" y="215" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="81" y="219" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="104" y="223" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="127" y="228" width="32" height="20" rx="3"/></g>
<g class="c-purple"><rect x="186" y="82" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="186" y="113" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="186" y="136" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="186" y="159" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="186" y="182" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="209" y="78" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="209" y="109" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="209" y="132" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="209" y="155" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="209" y="178" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="232" y="76" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="232" y="107" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="232" y="130" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="232" y="153" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="232" y="176" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="255" y="79" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="255" y="110" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="255" y="133" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="255" y="156" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="255" y="179" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="278" y="84" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="278" y="115" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="278" y="138" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="278" y="161" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="278" y="184" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="301" y="86" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="301" y="116" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="301" y="139" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="301" y="162" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="301" y="185" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="324" y="86" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="324" y="116" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="324" y="139" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="324" y="162" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="347" y="116" width="20" height="20" rx="3"/></g>
<g class="c-purple"><rect x="347" y="139" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="219" y="228" width="32" height="20" rx="3"/></g>
<g class="c-coral"><rect x="254" y="223" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="277" y="219" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="300" y="215" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="323" y="213" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="396" y="76" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="396" y="99" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="396" y="122" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="396" y="145" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="396" y="168" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="419" y="99" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="419" y="122" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="419" y="145" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="419" y="168" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="442" y="99" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="442" y="122" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="442" y="145" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="465" y="76" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="465" y="99" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="465" y="122" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="465" y="145" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="488" y="76" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="488" y="99" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="488" y="122" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="488" y="145" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="488" y="168" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="442" y="168" width="43" height="20" rx="3"/></g>
<g class="c-coral"><rect x="511" y="76" width="20" height="20" rx="3"/></g>
<g class="c-coral"><rect x="511" y="99" width="20" height="43" rx="3"/></g>
<g class="c-coral"><rect x="511" y="145" width="20" height="43" rx="3"/></g>
<g class="c-gray"><rect x="419" y="76" width="43" height="20" rx="3"/></g>
<g class="c-gray"><circle cx="440" cy="88" r="8"/></g>
<text class="th" x="91" y="284" text-anchor="middle">Left half</text>
<text class="ts" x="91" y="302" text-anchor="middle">34 keys</text>
<text class="th" x="278" y="284" text-anchor="middle">Right half</text>
<text class="ts" x="278" y="302" text-anchor="middle">41 keys</text>
<text class="th" x="465" y="284" text-anchor="middle">Numpad</text>
<text class="ts" x="465" y="302" text-anchor="middle">25 + knob</text>
<text class="ts" x="18" y="322">Column-staggered: each column offset for finger length. The halves are separate designs, not mirrors.</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB