keymap-drawer/t1.svg

<svg width="870" height="1240" viewBox="0 0 870 1240" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>/* inherit to force styles through use tags */
svg path {
    fill: inherit;
}

/* font and background color specifications */
svg.keymap {
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
    font-size: 14px;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    fill: #24292e;
}

/* default key styling */
rect.key {
    fill: #f6f8fa;
}

rect.key, rect.combo {
    stroke: #c9cccf;
    stroke-width: 1;
}

/* default key side styling, only used is draw_key_sides is set */
rect.side {
    filter: brightness(90%);
}

/* color accent for combo boxes */
rect.combo, rect.combo-separate {
    fill: #cdf;
}

/* color accent for held keys */
rect.held, rect.combo.held {
    fill: #fdd;
}

/* color accent for ghost (optional) keys */
rect.ghost, rect.combo.ghost {
    stroke-dasharray: 4, 4;
    stroke-width: 2;
}

text {
    text-anchor: middle;
    dominant-baseline: middle;
}

/* styling for layer labels */
text.label {
    font-weight: bold;
    text-anchor: start;
    stroke: white;
    stroke-width: 4;
    paint-order: stroke;
}

/* styling for optional footer */
text.footer {
    text-anchor: end;
    dominant-baseline: auto;
    stroke: white;
    stroke-width: 4;
    paint-order: stroke;
}

/* styling for combo tap, and key hold/shifted label text */
text.combo, text.hold, text.shifted {
    font-size: 11px;
}

text.hold {
    text-anchor: middle;
    dominant-baseline: auto;
}

text.shifted {
    text-anchor: middle;
    dominant-baseline: hanging;
}

text.layer-activator {
    text-decoration: underline;
}

/* styling for hold/shifted label text in combo box */
text.combo.hold, text.combo.shifted {
    font-size: 8px;
}

/* lighter symbol for transparent keys */
text.trans {
    fill: #7b7e81;
}

/* styling for combo dendrons */
path.combo {
    stroke-width: 1;
    stroke: gray;
    fill: none;
}

/* Start Tabler Icons Cleanup */
/* cannot use height/width with glyphs */
.icon-tabler > path {
    fill: inherit;
    stroke: inherit;
    stroke-width: 2;
}
/* hide tabler's default box */
.icon-tabler > path[stroke="none"][fill="none"] {
    visibility: hidden;
}
/* End Tabler Icons Cleanup */

@media (prefers-color-scheme: dark) {
svg.keymap { fill: #d1d6db; }
rect.key { fill: #3f4750; }
rect.key, rect.combo { stroke: #60666c; }
rect.combo, rect.combo-separate { fill: #1f3d7a; }
rect.held, rect.combo.held { fill: #854747; }
text.label, text.footer { stroke: black; }
text.trans { fill: #7e8184; }
path.combo { stroke: #7f7f7f; }

}</style>
<g transform="translate(30, 0)" class="layer-Custom-Colemak">
<text x="0" y="28" class="label" id="Custom-Colemak">Custom-Colemak:</text>
<g transform="translate(0, 56)">
<g transform="translate(30, 30)" class="key keypos-0">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">↹</text>
<text x="0" y="-26" class="key shifted">BTab</text>
</g>
<g transform="translate(90, 30)" class="key keypos-1">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">q</text>
<text x="0" y="-26" class="key shifted">Q</text>
</g>
<g transform="translate(150, 30)" class="key keypos-2">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">w</text>
<text x="0" y="-26" class="key shifted">W</text>
</g>
<g transform="translate(210, 30)" class="key keypos-3">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">f</text>
<text x="0" y="-26" class="key shifted">F</text>
</g>
<g transform="translate(270, 30)" class="key keypos-4">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">p</text>
<text x="0" y="-26" class="key shifted">P</text>
</g>
<g transform="translate(330, 30)" class="key keypos-5">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">b</text>
<text x="0" y="-26" class="key shifted">B</text>
</g>
<g transform="translate(480, 30)" class="key keypos-6">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">j</text>
<text x="0" y="-26" class="key shifted">J</text>
</g>
<g transform="translate(540, 30)" class="key keypos-7">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">l</text>
<text x="0" y="-26" class="key shifted">L</text>
</g>
<g transform="translate(600, 30)" class="key keypos-8">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">u</text>
<text x="0" y="-26" class="key shifted">U</text>
</g>
<g transform="translate(660, 30)" class="key keypos-9">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">y</text>
<text x="0" y="-26" class="key shifted">Y</text>
</g>
<g transform="translate(720, 30)" class="key keypos-10">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">&#x27;</text>
<text x="0" y="-26" class="key shifted">&quot;</text>
</g>
<g transform="translate(780, 30)" class="key keypos-11">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">;</text>
<text x="0" y="-26" class="key shifted">:</text>
</g>
<g transform="translate(30, 90)" class="key keypos-12">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap"><tspan style="font-size: 78%">Backspace</tspan></text>
<text x="0" y="-26" class="key shifted"><tspan style="font-size: 64%">Forward De…</tspan></text>
</g>
<g transform="translate(90, 90)" class="key keypos-13">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">a</text>
<text x="0" y="-26" class="key shifted">A</text>
</g>
<g transform="translate(150, 90)" class="key keypos-14">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">r</text>
<text x="0" y="-26" class="key shifted">R</text>
</g>
<g transform="translate(210, 90)" class="key keypos-15">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">s</text>
<text x="0" y="-26" class="key shifted">S</text>
</g>
<g transform="translate(270, 90)" class="key keypos-16">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">t</text>
<text x="0" y="-26" class="key shifted">T</text>
</g>
<g transform="translate(330, 90)" class="key keypos-17">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">g</text>
<text x="0" y="-26" class="key shifted">G</text>
</g>
<g transform="translate(480, 90)" class="key keypos-18">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">m</text>
<text x="0" y="-26" class="key shifted">M</text>
</g>
<g transform="translate(540, 90)" class="key keypos-19">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">n</text>
<text x="0" y="-26" class="key shifted">N</text>
</g>
<g transform="translate(600, 90)" class="key keypos-20">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">e</text>
<text x="0" y="-26" class="key shifted">E</text>
</g>
<g transform="translate(660, 90)" class="key keypos-21">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">i</text>
<text x="0" y="-26" class="key shifted">I</text>
</g>
<g transform="translate(720, 90)" class="key keypos-22">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">o</text>
<text x="0" y="-26" class="key shifted">O</text>
</g>
<g transform="translate(780, 90)" class="key keypos-23">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">Enter</text>
</g>
<g transform="translate(30, 150)" class="key keypos-24">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">Shift</text>
</g>
<g transform="translate(90, 150)" class="key keypos-25">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">x</text>
<text x="0" y="-26" class="key shifted">X</text>
</g>
<g transform="translate(150, 150)" class="key keypos-26">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">c</text>
<text x="0" y="-26" class="key shifted">C</text>
</g>
<g transform="translate(210, 150)" class="key keypos-27">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">d</text>
<text x="0" y="-26" class="key shifted">D</text>
</g>
<g transform="translate(270, 150)" class="key keypos-28">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">v</text>
<text x="0" y="-26" class="key shifted">V</text>
</g>
<g transform="translate(330, 150)" class="key keypos-29">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">z</text>
<text x="0" y="-26" class="key shifted">Z</text>
</g>
<g transform="translate(480, 150)" class="key keypos-30">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">/</text>
<text x="0" y="-26" class="key shifted">?</text>
</g>
<g transform="translate(540, 150)" class="key keypos-31">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">k</text>
<text x="0" y="-26" class="key shifted">K</text>
</g>
<g transform="translate(600, 150)" class="key keypos-32">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">h</text>
<text x="0" y="-26" class="key shifted">H</text>
</g>
<g transform="translate(660, 150)" class="key keypos-33">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">,</text>
<text x="0" y="-26" class="key shifted">&lt;</text>
</g>
<g transform="translate(720, 150)" class="key keypos-34">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">.</text>
<text x="0" y="-26" class="key shifted">&gt;</text>
</g>
<g transform="translate(780, 150)" class="key keypos-35">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">Shift</text>
</g>
<g transform="translate(330, 210)" class="key keypos-36">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<a href="#TL">
<text x="0" y="0" class="key tap layer-activator">TL</text>
</a></g>
<g transform="translate(390, 210)" class="key keypos-37">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">Space</text>
</g>
<g transform="translate(480, 210)" class="key keypos-38">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<a href="#TR">
<text x="0" y="0" class="key tap layer-activator">TR</text>
</a></g>
</g>
</g>
<g transform="translate(30, 296)" class="layer-TL">
<text x="0" y="28" class="label" id="TL">TL:</text>
<g transform="translate(0, 56)">
<g transform="translate(30, 30)" class="key keypos-0">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">Esc</text>
</g>
<g transform="translate(90, 30)" class="key sticky keypos-1">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key sticky"/>
<text x="0" y="0" class="key sticky tap">
<tspan x="0" dy="-0.6em">Window</tspan><tspan x="0" dy="1.2em">Manager</tspan>
</text>
</g>
<g transform="translate(150, 30)" class="key keypos-2">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">sFn</text>
</g>
<g transform="translate(210, 30)" class="key keypos-3">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(270, 30)" class="key keypos-4">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(330, 30)" class="key keypos-5">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">pguf</text>
</g>
<g transform="translate(480, 30)" class="key keypos-6">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">btb</text>
</g>
<g transform="translate(540, 30)" class="key keypos-7">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">▲</text>
</g>
<g transform="translate(600, 30)" class="key keypos-8">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">Tab</text>
</g>
<g transform="translate(660, 30)" class="key keypos-9">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(720, 30)" class="key keypos-10">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(780, 30)" class="key keypos-11">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(30, 90)" class="key keypos-12">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">sAlt</text>
</g>
<g transform="translate(90, 90)" class="key keypos-13">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">sCtl</text>
</g>
<g transform="translate(150, 90)" class="key keypos-14">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">sSft</text>
</g>
<g transform="translate(210, 90)" class="key keypos-15">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">sMet</text>
</g>
<g transform="translate(270, 90)" class="key keypos-16">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(330, 90)" class="key keypos-17">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">pgdf</text>
</g>
<g transform="translate(480, 90)" class="key keypos-18">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">◀</text>
</g>
<g transform="translate(540, 90)" class="key keypos-19">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">▼</text>
</g>
<g transform="translate(600, 90)" class="key keypos-20">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">▶</text>
</g>
<g transform="translate(660, 90)" class="key keypos-21">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">cw</text>
</g>
<g transform="translate(720, 90)" class="key keypos-22">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(780, 90)" class="key keypos-23">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(30, 150)" class="key keypos-24">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(90, 150)" class="key keypos-25">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(150, 150)" class="key keypos-26">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">sHyp</text>
</g>
<g transform="translate(210, 150)" class="key keypos-27">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(270, 150)" class="key keypos-28">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(330, 150)" class="key keypos-29">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(480, 150)" class="key keypos-30">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(540, 150)" class="key keypos-31">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">⌫</text>
</g>
<g transform="translate(600, 150)" class="key keypos-32">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">⌦</text>
</g>
<g transform="translate(660, 150)" class="key keypos-33">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(720, 150)" class="key keypos-34">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(780, 150)" class="key keypos-35">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(330, 210)" class="key held keypos-36">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key held"/>
<a href="#TL">
<text x="0" y="0" class="key held tap layer-activator">TL</text>
</a></g>
<g transform="translate(390, 210)" class="key keypos-37">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">Space</text>
</g>
<g transform="translate(480, 210)" class="key keypos-38">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<a href="#TR">
<text x="0" y="0" class="key tap layer-activator">TR</text>
</a></g>
</g>
</g>
<g transform="translate(30, 592)" class="layer-TR">
<text x="0" y="28" class="label" id="TR">TR:</text>
<g transform="translate(0, 56)">
<g transform="translate(30, 30)" class="key keypos-0">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">!</text>
<text x="0" y="-26" class="key shifted">`</text>
</g>
<g transform="translate(90, 30)" class="key keypos-1">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">@</text>
<text x="0" y="-26" class="key shifted">~</text>
</g>
<g transform="translate(150, 30)" class="key keypos-2">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">#</text>
<text x="0" y="-26" class="key shifted">^</text>
</g>
<g transform="translate(210, 30)" class="key keypos-3">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">$</text>
<text x="0" y="-26" class="key shifted">₹</text>
</g>
<g transform="translate(270, 30)" class="key keypos-4">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(330, 30)" class="key keypos-5">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">%</text>
</g>
<g transform="translate(480, 30)" class="key keypos-6">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">7f</text>
</g>
<g transform="translate(540, 30)" class="key keypos-7">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">8f</text>
</g>
<g transform="translate(600, 30)" class="key keypos-8">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">9f</text>
</g>
<g transform="translate(660, 30)" class="key keypos-9">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">plu</text>
</g>
<g transform="translate(720, 30)" class="key keypos-10">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">equ</text>
</g>
<g transform="translate(780, 30)" class="key keypos-11">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(30, 90)" class="key keypos-12">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">&amp;</text>
<text x="0" y="-26" class="key shifted">|</text>
</g>
<g transform="translate(90, 90)" class="key keypos-13">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">[</text>
<text x="0" y="-26" class="key shifted">]</text>
</g>
<g transform="translate(150, 90)" class="key keypos-14">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">{</text>
<text x="0" y="-26" class="key shifted">}</text>
</g>
<g transform="translate(210, 90)" class="key keypos-15">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">(</text>
<text x="0" y="-26" class="key shifted">)</text>
</g>
<g transform="translate(270, 90)" class="key keypos-16">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(330, 90)" class="key keypos-17">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">astf</text>
</g>
<g transform="translate(480, 90)" class="key keypos-18">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">4f</text>
</g>
<g transform="translate(540, 90)" class="key keypos-19">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">5f</text>
</g>
<g transform="translate(600, 90)" class="key keypos-20">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">6f</text>
</g>
<g transform="translate(660, 90)" class="key keypos-21">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">hpn</text>
</g>
<g transform="translate(720, 90)" class="key keypos-22">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(780, 90)" class="key keypos-23">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(30, 150)" class="key keypos-24">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(90, 150)" class="key keypos-25">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">&lt;</text>
</g>
<g transform="translate(150, 150)" class="key keypos-26">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">&gt;</text>
</g>
<g transform="translate(210, 150)" class="key keypos-27">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(270, 150)" class="key keypos-28">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(330, 150)" class="key keypos-29">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">/</text>
<text x="0" y="-26" class="key shifted">\</text>
</g>
<g transform="translate(480, 150)" class="key keypos-30">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">0f</text>
</g>
<g transform="translate(540, 150)" class="key keypos-31">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">1f</text>
</g>
<g transform="translate(600, 150)" class="key keypos-32">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">2f</text>
</g>
<g transform="translate(660, 150)" class="key keypos-33">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">3f</text>
</g>
<g transform="translate(720, 150)" class="key keypos-34">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(780, 150)" class="key keypos-35">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(330, 210)" class="key keypos-36">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<a href="#TL">
<text x="0" y="0" class="key tap layer-activator">TL</text>
</a></g>
<g transform="translate(390, 210)" class="key keypos-37">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">Space</text>
</g>
<g transform="translate(480, 210)" class="key held keypos-38">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key held"/>
<a href="#TR">
<text x="0" y="0" class="key held tap layer-activator">TR</text>
</a></g>
</g>
</g>
<g transform="translate(30, 888)" class="layer-TLTR">
<text x="0" y="28" class="label" id="TLTR">TLTR:</text>
<g transform="translate(0, 56)">
<g transform="translate(30, 30)" class="key keypos-0">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap"><tspan style="font-size: 64%">ScreenSaver</tspan></text>
<text x="0" y="26" class="key hold">Sleep</text>
</g>
<g transform="translate(90, 30)" class="key keypos-1">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.0em" style="font-size: 70%">Brightness</tspan><tspan x="0" dy="1.2em" style="font-size: 70%">increase</tspan>
</text>
<text x="0" y="-26" class="key shifted"><tspan style="font-size: 64%">Full Brigh…</tspan></text>
</g>
<g transform="translate(150, 30)" class="key keypos-2">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">med</text>
</g>
<g transform="translate(210, 30)" class="key keypos-3">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-1.2em" style="font-size: 88%">Increase</tspan><tspan x="0" dy="1.2em" style="font-size: 88%">Volume</tspan>
</text>
<text x="0" y="26" class="key hold"><tspan style="font-size: 64%">Maximum Vo…</tspan></text>
</g>
<g transform="translate(270, 30)" class="key keypos-4">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(330, 30)" class="key keypos-5">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(480, 30)" class="key keypos-6">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(540, 30)" class="key keypos-7">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">mu</text>
</g>
<g transform="translate(600, 30)" class="key keypos-8">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(660, 30)" class="key keypos-9">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(720, 30)" class="key keypos-10">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">lrld</text>
</g>
<g transform="translate(780, 30)" class="key keypos-11">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(30, 90)" class="key keypos-12">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">slw</text>
</g>
<g transform="translate(90, 90)" class="key keypos-13">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">scr</text>
</g>
<g transform="translate(150, 90)" class="key keypos-14">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">mrgt</text>
</g>
<g transform="translate(210, 90)" class="key keypos-15">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">mlft</text>
</g>
<g transform="translate(270, 90)" class="key keypos-16">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(330, 90)" class="key keypos-17">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(480, 90)" class="key keypos-18">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">ml</text>
</g>
<g transform="translate(540, 90)" class="key keypos-19">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">md</text>
</g>
<g transform="translate(600, 90)" class="key keypos-20">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">mr</text>
</g>
<g transform="translate(660, 90)" class="key keypos-21">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(720, 90)" class="key keypos-22">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(780, 90)" class="key keypos-23">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(30, 150)" class="key keypos-24">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-1.2em" style="font-size: 70%">Decrease</tspan><tspan x="0" dy="1.2em" style="font-size: 70%">Brightness</tspan>
</text>
<text x="0" y="26" class="key hold"><tspan style="font-size: 64%">Minimum Br…</tspan></text>
</g>
<g transform="translate(90, 150)" class="key keypos-25">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(150, 150)" class="key keypos-26">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.0em" style="font-size: 88%">Decrease</tspan><tspan x="0" dy="1.2em" style="font-size: 88%">Volume</tspan>
</text>
<text x="0" y="-26" class="key shifted">Mute</text>
</g>
<g transform="translate(210, 150)" class="key keypos-27">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(270, 150)" class="key keypos-28">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(330, 150)" class="key keypos-29">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(480, 150)" class="key keypos-30">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(540, 150)" class="key keypos-31">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(600, 150)" class="key keypos-32">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(660, 150)" class="key keypos-33">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(720, 150)" class="key keypos-34">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(780, 150)" class="key keypos-35">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
</g>
<g transform="translate(330, 210)" class="key held keypos-36">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key held"/>
<a href="#TL">
<text x="0" y="0" class="key held tap layer-activator">TL</text>
</a></g>
<g transform="translate(390, 210)" class="key keypos-37">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key"/>
<text x="0" y="0" class="key tap">Space</text>
</g>
<g transform="translate(480, 210)" class="key held keypos-38">
<rect rx="6" ry="6" x="-28" y="-28" width="56" height="56" class="key held"/>
<a href="#TR">
<text x="0" y="0" class="key held tap layer-activator">TR</text>
</a></g>
</g>
</g>
</svg>