2472 lines
48 KiB
XML
2472 lines
48 KiB
XML
|
|
<svg width='786px'
|
|
height='300px'
|
|
viewBox='0 0 786 300'
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
|
|
<style type='text/css'>
|
|
.keycap .border { stroke: black; stroke-width: 2; }
|
|
.keycap .inner.border { stroke: rgba(0,0,0,.1); }
|
|
</style>
|
|
<defs>
|
|
<linearGradient id="DCS">
|
|
<stop offset="0%" stop-color="black" stop-opacity="0"/>
|
|
<stop offset="40%" stop-color="black" stop-opacity="0.1"/>
|
|
<stop offset="60%" stop-color="black" stop-opacity="0.1"/>
|
|
<stop offset="100%" stop-color="black" stop-opacity="0"/>
|
|
</linearGradient>
|
|
<linearGradient id="SPACE" x1="0%" x2="0%" y1="0%" y2="100%">
|
|
<stop offset="0%" stop-color="black" stop-opacity="0.1"/>
|
|
<stop offset="20%" stop-color="black" stop-opacity="0.0"/>
|
|
<stop offset="40%" stop-color="black" stop-opacity="0.0"/>
|
|
<stop offset="100%" stop-color="black" stop-opacity="0.1"/>
|
|
</linearGradient>
|
|
<radialGradient id="DSA">
|
|
<stop offset="0%" stop-color="black" stop-opacity="0.1"/>
|
|
<stop offset="10%" stop-color="black" stop-opacity="0.1"/>
|
|
<stop offset="100%" stop-color="black" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<radialGradient id="SA" xlink:href="#DSA" />
|
|
</defs>
|
|
|
|
<g transform='translate(10,10)'>
|
|
<rect width="766" height="280"
|
|
stroke="#ddd" stroke-width="1" fill="#656565" rx="6"/>
|
|
<g transform='translate(5,5)'>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="2" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="2" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="3" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="3" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="3" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="56" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="56" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="57" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="57" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="57" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="110" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="110" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="111" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="111" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="111" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="164" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="164" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="165" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="165" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="165" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="218" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="218" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="219" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="219" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="219" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="272" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="272" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="273" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="273" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="273" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="326" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="326" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="327" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="327" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="327" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="380" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="380" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="381" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="381" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="381" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="434" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="434" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="435" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="435" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="435" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="488" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="488" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="489" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="489" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="489" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="542" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="542" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="543" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="543" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="543" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="596" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="596" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="597" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="597" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="597" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="650" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="650" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="651" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="651" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="651" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="704" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="704" y="2"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="705" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="705" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="705" y="3"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="2" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="2" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="3" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="3" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="3" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="56" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="56" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="57" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="57" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="57" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="110" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="110" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="111" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="111" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="111" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="164" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="164" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="165" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="165" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="165" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="218" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="218" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="219" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="219" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="219" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="272" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="272" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="273" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="273" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="273" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="326" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="326" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="327" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="327" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="327" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="380" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="380" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="381" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="381" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="381" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="434" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="434" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="435" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="435" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="435" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="488" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="488" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="489" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="489" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="489" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="542" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="542" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="543" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="543" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="543" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="596" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="596" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="597" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="597" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="597" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="650" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="650" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="651" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="651" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="651" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="704" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="704" y="56"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="705" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="705" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="705" y="57"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="2" y="110"
|
|
width="63.5" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="2" y="110"
|
|
width="63.5" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="3" y="111"
|
|
width="61.5" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="3" y="111"
|
|
width="61.5" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="3" y="111"
|
|
width="61.5" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="69.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="69.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="70.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="70.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="70.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="123.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="123.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="124.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="124.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="124.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="177.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="177.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="178.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="178.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="178.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="231.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="231.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="232.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="232.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="232.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="285.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="285.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="286.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="286.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="286.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="339.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="339.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="340.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="340.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="340.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="393.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="393.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="394.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="394.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="394.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="447.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="447.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="448.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="448.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="448.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="501.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="501.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="502.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="502.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="502.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="555.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="555.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="556.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="556.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="556.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="609.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="609.5" y="110"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="610.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="610.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="610.5" y="111"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="663.5" y="110"
|
|
width="90.5" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="663.5" y="110"
|
|
width="90.5" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="664.5" y="111"
|
|
width="88.5" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="664.5" y="111"
|
|
width="88.5" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="664.5" y="111"
|
|
width="88.5" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="2" y="164"
|
|
width="90.5" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="2" y="164"
|
|
width="90.5" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="3" y="165"
|
|
width="88.5" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="3" y="165"
|
|
width="88.5" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="3" y="165"
|
|
width="88.5" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="96.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="96.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="97.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="97.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="97.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="150.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="150.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="151.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="151.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="151.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="204.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="204.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="205.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="205.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="205.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="258.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="258.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="259.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="259.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="259.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="312.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="312.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="313.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="313.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="313.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="366.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="366.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="367.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="367.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="367.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="420.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="420.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="421.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="421.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="421.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="474.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="474.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="475.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="475.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="475.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="528.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="528.5" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="529.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="529.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="529.5" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="596" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="596" y="164"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="597" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="597" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="597" y="165"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="650" y="164"
|
|
width="104" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="650" y="164"
|
|
width="104" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="651" y="165"
|
|
width="102" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="651" y="165"
|
|
width="102" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="651" y="165"
|
|
width="102" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="2" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="2" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="3" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="3" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="3" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="56" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="56" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="57" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="57" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="57" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="110" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="110" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="111" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="111" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="111" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="164" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="164" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="165" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="165" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="165" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="218" y="218"
|
|
width="212" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="218" y="218"
|
|
width="212" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="219" y="219"
|
|
width="210" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="219" y="219"
|
|
width="210" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="219" y="219"
|
|
width="210" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="434" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="434" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="435" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="435" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="435" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="488" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="488" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="489" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="489" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="489" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="542" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="542" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="543" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="543" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="543" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="596" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="596" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="597" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="597" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="597" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="650" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="650" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="651" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="651" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="651" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
<g class=' keycap'
|
|
>
|
|
|
|
|
|
<!-- Outer Border -->
|
|
<rect x="704" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d" class="outer border"/>
|
|
|
|
<!-- Outer Fill -->
|
|
<rect x="704" y="218"
|
|
width="50" height="50"
|
|
rx="5" fill="#3d3d3d"/>
|
|
|
|
|
|
|
|
<!-- Inner Border -->
|
|
<rect x="705" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949" class="inner border"/>
|
|
|
|
<!-- Inner Fill -->
|
|
<rect x="705" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="#494949"/>
|
|
|
|
|
|
|
|
|
|
<rect x="705" y="219"
|
|
width="48" height="48"
|
|
rx="5" fill="url(#FLAT)"/>
|
|
|
|
|
|
|
|
|
|
</g>
|
|
|
|
</g>
|
|
</g>
|
|
</svg>
|
