1 files changed, 1547 insertions, 0 deletions
diff --git a/public/assets/images/pointer-events-test.svg b/public/assets/images/pointer-events-test.svg
new file mode 100644
index 0000000..d5130eb
--- /dev/null
+++ b/public/assets/images/pointer-events-test.svg
@@ -0,0 +1,1547 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="-10 -10 120 120"
+   version="1.1"
+   id="svg1"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <rect
+       id="rect1"
+       width="10"
+       height="10"
+       x="-5"
+       y="-5" />
+  </defs>
+  <style>
+    rect {
+      fill: inherit;
+    }
+    g use {
+      fill: gray;
+    }
+    g:hover use {
+      fill: gold;
+    }
+    circle {
+      stroke: black;
+      fill: teal;
+      stroke-width: 0.25px;
+    }
+  </style>
+  <g
+     id="use2"
+     style="display:inline"
+     transform="translate(5,5)">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use103" />
+    <circle
+       id="circle103"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use3"
+     transform="translate(5,15)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use102" />
+    <circle
+       id="circle102"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use4"
+     transform="translate(5,25)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use201" />
+    <circle
+       id="circle201"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use5"
+     transform="translate(5,35)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use200" />
+    <circle
+       id="circle200"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use6"
+     transform="translate(5,45)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use199" />
+    <circle
+       id="circle199"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use7"
+     transform="translate(5,55)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use198" />
+    <circle
+       id="circle198"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use8"
+     transform="translate(5,65)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use197" />
+    <circle
+       id="circle197"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use9"
+     transform="translate(5,75)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use196" />
+    <circle
+       id="circle196"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use10"
+     transform="translate(5,85)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use195" />
+    <circle
+       id="circle195"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use11"
+     transform="translate(5,95)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use194" />
+    <circle
+       id="circle194"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use12"
+     transform="translate(15,5)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use193" />
+    <circle
+       id="circle193"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use13"
+     transform="translate(15,15)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use192" />
+    <circle
+       id="circle192"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use14"
+     transform="translate(15,25)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use191" />
+    <circle
+       id="circle191"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use15"
+     transform="translate(15,35)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use190" />
+    <circle
+       id="circle190"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use16"
+     transform="translate(15,45)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use189" />
+    <circle
+       id="circle189"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use17"
+     transform="translate(15,55)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use188" />
+    <circle
+       id="circle188"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use18"
+     transform="translate(15,65)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use187" />
+    <circle
+       id="circle187"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use19"
+     transform="translate(15,75)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use186" />
+    <circle
+       id="circle186"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use20"
+     transform="translate(15,85)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use185" />
+    <circle
+       id="circle185"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use21"
+     transform="translate(15,95)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use184" />
+    <circle
+       id="circle184"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use22"
+     transform="translate(25,5)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use183" />
+    <circle
+       id="circle183"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use23"
+     transform="translate(25,15)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use182" />
+    <circle
+       id="circle182"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use24"
+     transform="translate(25,25)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use181" />
+    <circle
+       id="circle181"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use25"
+     transform="translate(25,35)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use180" />
+    <circle
+       id="circle180"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use26"
+     transform="translate(25,45)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use179" />
+    <circle
+       id="circle179"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use27"
+     transform="translate(25,55)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use178" />
+    <circle
+       id="circle178"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use28"
+     transform="translate(25,65)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use177" />
+    <circle
+       id="circle177"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use29"
+     transform="translate(25,75)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use176" />
+    <circle
+       id="circle176"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use30"
+     transform="translate(25,85)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use175" />
+    <circle
+       id="circle175"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use31"
+     transform="translate(25,95)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use174" />
+    <circle
+       id="circle174"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use32"
+     transform="translate(35,5)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use173" />
+    <circle
+       id="circle173"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use33"
+     transform="translate(35,15)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use172" />
+    <circle
+       id="circle172"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use34"
+     transform="translate(35,25)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use171" />
+    <circle
+       id="circle171"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use35"
+     transform="translate(35,35)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use170" />
+    <circle
+       id="circle170"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use36"
+     transform="translate(35,45)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use169" />
+    <circle
+       id="circle169"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use37"
+     transform="translate(35,55)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use168" />
+    <circle
+       id="circle168"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use38"
+     transform="translate(35,65)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use167" />
+    <circle
+       id="circle167"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use39"
+     transform="translate(35,75)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use166" />
+    <circle
+       id="circle166"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use40"
+     transform="translate(35,85)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use165" />
+    <circle
+       id="circle165"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use41"
+     transform="translate(35,95)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use164" />
+    <circle
+       id="circle164"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use42"
+     transform="translate(45,5)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use163" />
+    <circle
+       id="circle163"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use43"
+     transform="translate(45,15)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use162" />
+    <circle
+       id="circle162"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use44"
+     transform="translate(45,25)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use161" />
+    <circle
+       id="circle161"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use45"
+     transform="translate(45,35)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use160" />
+    <circle
+       id="circle160"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use46"
+     transform="translate(45,45)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use159" />
+    <circle
+       id="circle159"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use47"
+     transform="translate(45,55)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use158" />
+    <circle
+       id="circle158"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use48"
+     transform="translate(45,65)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use157" />
+    <circle
+       id="circle157"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use49"
+     transform="translate(45,75)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use156" />
+    <circle
+       id="circle156"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use50"
+     transform="translate(45,85)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use155" />
+    <circle
+       id="circle155"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use51"
+     transform="translate(45,95)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use154" />
+    <circle
+       id="circle154"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use52"
+     transform="translate(55,5)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use153" />
+    <circle
+       id="circle153"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use53"
+     transform="translate(55,15)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use152" />
+    <circle
+       id="circle152"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use54"
+     transform="translate(55,25)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use151" />
+    <circle
+       id="circle151"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use55"
+     transform="translate(55,35)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use150" />
+    <circle
+       id="circle150"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use56"
+     transform="translate(55,45)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use149" />
+    <circle
+       id="circle149"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use57"
+     transform="translate(55,55)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use148" />
+    <circle
+       id="circle148"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use58"
+     transform="translate(55,65)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use147" />
+    <circle
+       id="circle147"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use59"
+     transform="translate(55,75)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use146" />
+    <circle
+       id="circle146"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use60"
+     transform="translate(55,85)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use145" />
+    <circle
+       id="circle145"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use61"
+     transform="translate(55,95)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use144" />
+    <circle
+       id="circle144"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use62"
+     transform="translate(65,5)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use143" />
+    <circle
+       id="circle143"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use63"
+     transform="translate(65,15)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use142" />
+    <circle
+       id="circle142"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use64"
+     transform="translate(65,25)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use141" />
+    <circle
+       id="circle141"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use65"
+     transform="translate(65,35)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use140" />
+    <circle
+       id="circle140"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use66"
+     transform="translate(65,45)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use139" />
+    <circle
+       id="circle139"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use67"
+     transform="translate(65,55)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use138" />
+    <circle
+       id="circle138"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use68"
+     transform="translate(65,65)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use137" />
+    <circle
+       id="circle137"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use69"
+     transform="translate(65,75)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use136" />
+    <circle
+       id="circle136"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use70"
+     transform="translate(65,85)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use135" />
+    <circle
+       id="circle135"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use71"
+     transform="translate(65,95)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use134" />
+    <circle
+       id="circle134"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use72"
+     transform="translate(75,5)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use133" />
+    <circle
+       id="circle133"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use73"
+     transform="translate(75,15)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use132" />
+    <circle
+       id="circle132"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use74"
+     transform="translate(75,25)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use131" />
+    <circle
+       id="circle131"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use75"
+     transform="translate(75,35)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use130" />
+    <circle
+       id="circle130"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use76"
+     transform="translate(75,45)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use129" />
+    <circle
+       id="circle129"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use77"
+     transform="translate(75,55)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use128" />
+    <circle
+       id="circle128"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use78"
+     transform="translate(75,65)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use127" />
+    <circle
+       id="circle127"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use79"
+     transform="translate(75,75)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use126" />
+    <circle
+       id="circle126"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use80"
+     transform="translate(75,85)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use125" />
+    <circle
+       id="circle125"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use81"
+     transform="translate(75,95)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use124" />
+    <circle
+       id="circle124"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use82"
+     transform="translate(85,5)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use123" />
+    <circle
+       id="circle123"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use83"
+     transform="translate(85,15)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use122" />
+    <circle
+       id="circle122"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use84"
+     transform="translate(85,25)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use121" />
+    <circle
+       id="circle121"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use85"
+     transform="translate(85,35)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use120" />
+    <circle
+       id="circle120"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use86"
+     transform="translate(85,45)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use119" />
+    <circle
+       id="circle119"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use87"
+     transform="translate(85,55)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use118" />
+    <circle
+       id="circle118"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use88"
+     transform="translate(85,65)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use117" />
+    <circle
+       id="circle117"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use89"
+     transform="translate(85,75)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use116" />
+    <circle
+       id="circle116"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use90"
+     transform="translate(85,85)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use115" />
+    <circle
+       id="circle115"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use91"
+     transform="translate(85,95)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use114" />
+    <circle
+       id="circle114"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use92"
+     transform="translate(95,5)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use113" />
+    <circle
+       id="circle113"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use93"
+     transform="translate(95,15)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use112" />
+    <circle
+       id="circle112"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use94"
+     transform="translate(95,25)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use111" />
+    <circle
+       id="circle111"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use95"
+     transform="translate(95,35)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use110" />
+    <circle
+       id="circle110"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use96"
+     transform="translate(95,45)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use109" />
+    <circle
+       id="circle109"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use97"
+     transform="translate(95,55)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use108" />
+    <circle
+       id="circle108"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use98"
+     transform="translate(95,65)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use107" />
+    <circle
+       id="circle107"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use99"
+     transform="translate(95,75)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use106" />
+    <circle
+       id="circle106"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use100"
+     transform="translate(95,85)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use105" />
+    <circle
+       id="circle105"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <g
+     id="use101"
+     transform="translate(95,95)"
+     style="display:inline">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect1"
+       id="use104" />
+    <circle
+       id="circle104"
+       cx="0"
+       cy="0"
+       r="2.5" />
+  </g>
+  <script>
+  document.querySelectorAll('g').forEach(g => {
+    const circle = g.querySelector('circle');
+    g.addEventListener('pointerover', e => {
+      circle.setAttributeNS(null, 'transform', 'scale(3)');
+    });
+    g.addEventListener('pointerleave', e => {
+      circle.removeAttributeNS(null, 'transform');
+    });
+  })
+  </script>
+</svg>