WIP: use esbuild to bust cache for mapsheets.svg

author: Catalin Mititiuc <webdevcat@proton.me> 2024-05-27 10:51:19 -0700
committer: Catalin Mititiuc <webdevcat@proton.me> 2024-05-27 10:51:19 -0700
commit: 1b04583ae8784a0ec9dec3f8acb624fda73c879d (patch)
tree: 8b437f72f72961bd7cd596310b49166548916e52
parent: a80728f16f90616d93dcc9ed932528b35e2ef62d (diff)
2 files changed, 2095 insertions, 0 deletions
diff --git a/esbuild-server.mjs b/esbuild-server.mjs
new file mode 100644
index 0000000..c49aa47
--- /dev/null
+++ b/esbuild-server.mjs
@@ -0,0 +1,122 @@
+// const esbuild = require('esbuild');
+// const fs = require('node:fs');
+
+import * as esbuild from 'esbuild';
+import * as fs from 'node:fs';
+
+const regex = new RegExp('mapsheets\..+\.svg');
+
+const svgUseCacheBust = {
+  name: 'svgUseCacheBust',
+  setup(build) {
+    build.onStart(() => {
+      const version = Date.now();
+      console.log(`Adding cache buster ${version}`);
+      const file = fs.readFileSync('./src/scenario-side_show.svg', { encoding: 'utf-8' });
+      const newFile = file.replaceAll('%%VERSION%%', version);
+      fs.writeFileSync('./public/assets/images/scenario-side_show.svg', newFile);
+      const files = fs.readdirSync('./public/assets/images').filter(fn => regex.test(fn));
+      files.forEach(fn => fs.unlinkSync(`./public/assets/images/${fn}`));
+      fs.copyFileSync('./public/assets/images/mapsheets.svg', `./public/assets/images/mapsheets.${version}.svg`);
+    })
+
+    // version = Math.random();
+    // build.onResolve({ filter: /svg/ }, args => {
+    //   console.log('onresolve', version, args);
+    // });
+  }
+}
+
+// {
+//   bundle: true,
+//   define: {
+//     'env': `"${process.env.NODE_ENV || 'dev'}"`,
+//   },
+//   entryPoints: ['src/index.js', 'src/map.js', 'src/soldier_record_block.js'],
+//   // outdir: 'build',
+//   ...(process.env.NODE_ENV !== 'test') && {
+//     outdir: 'build'
+//   },
+//   assetNames: `[name]${version}`,
+//   plugins: [svgUseCacheBust],
+//   loader: {
+//     '.svg': 'file'
+//   },
+// },
+
+// let ctx = await esbuild.context({
+//   entryPoints: ['src/*.js'],
+//   outdir: 'public',
+//   bundle: true,
+//   plugins: [svgUseCacheBust],
+//   loader: {
+//     '.svg': 'file'
+//   },
+// })
+
+// let { host, port } = await ctx.serve({
+//   servedir: 'public',
+// })
+
+const colors = {
+  reset: '\x1b[0m',
+  dim: '\x1b[2m',
+  bright: '\x1b[1m',
+  normal: '\x1b[22m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+}
+
+// esbuild.context({
+//   entryPoints: ['src/*.js'],
+//   outdir: 'public',
+//   bundle: true,
+//   plugins: [svgUseCacheBust],
+//   loader: {
+//     '.svg': 'file'
+//   },
+//   logLevel: 'info',
+// }).then(ctx => {
+//   console.log('context', ctx);
+
+//   ctx.serve({
+//     servedir: 'public',
+//     onRequest: function({ remoteAddress, method, path, status, timeInMS }) {
+//       let statusColor = colors.red;
+
+//       if (status >= 200 && status <= 299) {
+//         statusColor = colors.green;
+//       } else if (status >= 300 && status <= 399) {
+//         statusColor = colors.yellow;
+//       }
+
+//       console.log(`${colors.dim}${remoteAddress} - "${method} ${path}" ${colors.normal}${statusColor}${status}${colors.reset}${colors.dim} [${timeInMS}ms]${colors.reset}`);
+//     }
+//   })
+// });
+
+let ctx = await esbuild.context({
+  entryPoints: ['src/*.js'],
+  bundle: true,
+  outdir: 'public',
+  plugins: [svgUseCacheBust],
+});
+
+await ctx.watch();
+
+let { host, port } = await ctx.serve({
+  servedir: 'public',
+  port: 8080,
+  onRequest: function({ remoteAddress, method, path, status, timeInMS }) {
+    let statusColor = colors.red;
+
+    if (status >= 200 && status <= 299) {
+      statusColor = colors.green;
+    } else if (status >= 300 && status <= 399) {
+      statusColor = colors.yellow;
+    }
+
+    console.log(`${colors.dim}${remoteAddress} - "${method} ${path}" ${colors.normal}${statusColor}${status}${colors.reset}${colors.dim} [${timeInMS}ms]${colors.reset}`);
+  },
+});
diff --git a/src/scenario-side_show.svg b/src/scenario-side_show.svg
new file mode 100644
index 0000000..e4211a0
--- /dev/null
+++ b/src/scenario-side_show.svg
@@ -0,0 +1,1973 @@
+<?xml version="1.0" standalone="no"?>
+<svg viewBox="-15.639999389648438 -109 2320.879638671875 3280" xmlns="http://www.w3.org/2000/svg">
+  <!-- <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://localhost:8080/assets/css/map.css" type="text/css" /> -->
+  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
+  <style>
+    g[data-edge="north"] { --i: -2; }
+    g[data-edge="south"] { --i: 52; }
+
+    #background {
+      stroke: #304b75;
+      fill: #bacae3;
+    }
+
+    pattern use {
+      stroke: black;
+      stroke-width: 0.3px;
+    }
+
+    .cw-60-deg {
+      transform: rotate(60deg);
+    }
+
+    .ccw-60-deg {
+      transform: rotate(-60deg);
+    }
+  </style>
+  <defs>
+    <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+    <circle id="counter-base" cx="0" cy="0" r="5"/>
+
+    <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
+
+    <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
+      <use y="-15" href="#ast-line"/>
+      <use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/>
+      <use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/>
+      <use y="15" href="#ast-line"/>
+      <use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/>
+      <use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/>
+
+      <use x="8.66" href="#ast-line"/>
+      <use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/>
+      <use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
+      <use x="-8.66" href="#ast-line"/>
+      <use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/>
+      <use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
+    </pattern>
+
+    <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
+    <g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
+    <g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
+    <g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
+    <g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
+    <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
+    <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
+
+    <g id="semi-auto">
+      <line x1="-2" y1="1" x2="2" y2="1"/>
+      <line x1="-2" y1="2" x2="2" y2="2"/>
+    </g>
+
+    <g id="auto">
+      <line x1="-2" y1="0" x2="2" y2="0"/>
+      <line x1="-2" y1="1" x2="2" y2="1"/>
+      <line x1="-2" y1="2" x2="2" y2="2"/>
+    </g>
+
+    <g id="rifle" class="weapon-symbol">
+      <use href="#semi-auto"/>
+      <line x1="0" y1="-5" x2="0" y2="5"/>
+      <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+    </g>
+
+    <g id="smg" class="weapon-symbol">
+      <use href="#auto"/>
+      <line x1="0" y1="-5" x2="0" y2="4.5"/>
+      <line x1="-2" y1="4.5" x2="2" y2="4.5"/>
+    </g>
+
+    <g id="blazer" class="weapon-symbol">
+      <use href="#auto"/>
+      <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
+      <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+    </g>
+
+    <image id="counter-prone" href="counter_prone.jpg" width="10"/>
+    <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
+    <image id="numbers" href="rendered_numbers.png" width="182" height="22"/>
+
+    <symbol id="n1" viewBox="1 0 17 22" width="17" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n2" viewBox="19 0 16 22" width="16" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n3" viewBox="36 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n4" viewBox="54 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n5" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n6" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n7" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n8" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n9" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n0" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+  </defs>
+
+  <rect id="background"/>
+
+  <g class="gameboard">
+    <!-- <use href="http://localhost:8080/assets/images/mapsheets.svg#map2"/>
+    <use href="http://localhost:8080/assets/images/mapsheets.svg#map3" style="transform: translate(0, 390.25px);"/> -->
+    <use class="mapsheets" href="mapsheets.%%VERSION%%.svg#map2"/>
+    <use class="mapsheets" href="mapsheets.%%VERSION%%.svg#map3" style="transform: translate(0, 390.25px);"/>
+
+    <rect id="dots" fill="url(#asterisk)"/>
+
+    <g id="firing-arcs">
+      <g id="shapes"/>
+      <g id="lines"/>
+    </g>
+
+    <g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
+      <g data-edge="north">
+        <g data-x="13">
+          <g class="counter" data-allegiance="attacker" data-number="1">
+            <use href="#counter-base"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/>
+            <!-- <use data-href="counters.svg#rifle"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/> -->
+          </g>
+        </g>
+        <g data-x="14">
+          <g class="counter" data-allegiance="attacker" data-number="2"><use href="#counter-base"/><use class="troop-number" href="#t-2"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
+        </g>
+        <g data-x="15">
+          <g class="counter" data-allegiance="attacker" data-number="3"><use href="#counter-base"/><use class="troop-number" href="#t-3"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
+        </g>
+        <g data-x="16">
+          <g class="counter" data-allegiance="attacker" data-number="4"><use href="#counter-base"/><use class="troop-number" href="#t-4"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
+        </g>
+        <g data-x="17">
+          <g class="counter" data-allegiance="attacker" data-number="5"><use href="#counter-base"/><use class="troop-number" href="#t-5"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
+        </g>
+        <g data-x="18">
+          <g class="counter" data-allegiance="attacker" data-number="6"><use href="#counter-base"/><use class="troop-number" href="#t-6"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
+        </g>
+        <g data-x="19">
+          <g class="counter" data-allegiance="attacker" data-number="7"><use href="#counter-base"/><use class="troop-number" href="#t-7"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#blazer"/></g>
+        </g>
+      </g>
+      <g data-edge="south">
+        <g data-x="13">
+          <g class="counter" data-allegiance="defender" data-number="1"><use href="#counter-base"/><use class="troop-number" href="#t-1"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
+        </g>
+        <g data-x="14">
+          <g class="counter" data-allegiance="defender" data-number="2"><use href="#counter-base"/><use class="troop-number" href="#t-2"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#rifle"/></g>
+        </g>
+        <g data-x="15">
+          <g class="counter" data-allegiance="defender" data-number="3"><use href="#counter-base"/><use class="troop-number" href="#t-3"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
+        </g>
+        <g data-x="16">
+          <g class="counter" data-allegiance="defender" data-number="4"><use href="#counter-base"/><use class="troop-number" href="#t-4"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
+        </g>
+        <g data-x="17">
+          <g class="counter" data-allegiance="defender" data-number="5"><use href="#counter-base"/><use class="troop-number" href="#t-5"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
+        </g>
+        <g data-x="18">
+          <g class="counter" data-allegiance="defender" data-number="6"><use href="#counter-base"/><use class="troop-number" href="#t-6"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#smg"/></g>
+        </g>
+        <g data-x="19">
+          <g class="counter" data-allegiance="defender" data-number="7"><use href="#counter-base"/><use class="troop-number" href="#t-7"/><use class="squad-number" href="#t-1"/><use class="primary-weapon" href="#blazer"/></g>
+        </g>
+      </g>
+    </g>
+
+    <g class="grid">
+      <g data-y="0">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="1">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="2">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="3">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="4">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="5">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="6">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="7">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="8">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="9">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="10">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="11">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="12">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="13">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="14">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="15">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="16">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="17">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="18">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="19">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="20">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="21">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="22">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="23">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="24">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="25">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="26">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="27">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="28">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="29">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="30">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="31">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="32">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="33">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="34">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="35">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="36">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="37">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="38">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="39">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="40">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="41">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="42">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="43">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="44">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="45">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="46">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="47">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="48">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="49">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+      <g data-y="50">
+        <g data-x="0"><use href="#hex"/></g>
+        <g data-x="1"><use href="#hex"/></g>
+        <g data-x="2"><use href="#hex"/></g>
+        <g data-x="3"><use href="#hex"/></g>
+        <g data-x="4"><use href="#hex"/></g>
+        <g data-x="5"><use href="#hex"/></g>
+        <g data-x="6"><use href="#hex"/></g>
+        <g data-x="7"><use href="#hex"/></g>
+        <g data-x="8"><use href="#hex"/></g>
+        <g data-x="9"><use href="#hex"/></g>
+        <g data-x="10"><use href="#hex"/></g>
+        <g data-x="11"><use href="#hex"/></g>
+        <g data-x="12"><use href="#hex"/></g>
+        <g data-x="13"><use href="#hex"/></g>
+        <g data-x="14"><use href="#hex"/></g>
+        <g data-x="15"><use href="#hex"/></g>
+        <g data-x="16"><use href="#hex"/></g>
+        <g data-x="17"><use href="#hex"/></g>
+        <g data-x="18"><use href="#hex"/></g>
+        <g data-x="19"><use href="#hex"/></g>
+        <g data-x="20"><use href="#hex"/></g>
+        <g data-x="21"><use href="#hex"/></g>
+        <g data-x="22"><use href="#hex"/></g>
+        <g data-x="23"><use href="#hex"/></g>
+        <g data-x="24"><use href="#hex"/></g>
+        <g data-x="25"><use href="#hex"/></g>
+        <g data-x="26"><use href="#hex"/></g>
+        <g data-x="27"><use href="#hex"/></g>
+        <g data-x="28"><use href="#hex"/></g>
+        <g data-x="29"><use href="#hex"/></g>
+        <g data-x="30"><use href="#hex"/></g>
+        <g data-x="31"><use href="#hex"/></g>
+        <g data-x="32"><use href="#hex"/></g>
+      </g>
+    </g>
+  </g>
+  <script>//<![CDATA[
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
+    // function getRandomIntInclusive(min, max) {
+    //   const minCeiled = Math.ceil(min);
+    //   const maxFloored = Math.floor(max);
+    //   return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // The maximum is inclusive and the minimum is inclusive
+    // }
+
+    // const cacheBuster = Array(20).fill(null).map(() => getRandomIntInclusive(0, 9)).join('');
+
+    // document.querySelectorAll('[data-href]').forEach(el => {
+    //   el.setAttributeNS(null, 'href', el.dataset.href.split('#').join(`?v=${cacheBuster}#`));
+    // });
+  //]]></script>
+  <!-- <script href="http://localhost:8080/map.js"/> -->
+  <script href="../../map.js"/>
+</svg>
author	Catalin Mititiuc <webdevcat@proton.me>	2024-05-27 10:51:19 -0700
committer	Catalin Mititiuc <webdevcat@proton.me>	2024-05-27 10:51:19 -0700
commit	1b04583ae8784a0ec9dec3f8acb624fda73c879d (patch)
tree	8b437f72f72961bd7cd596310b49166548916e52
parent	a80728f16f90616d93dcc9ed932528b35e2ef62d (diff)