1 files changed, 23 insertions, 7 deletions
diff --git a/public/index.html b/public/index.html
index d97baee..bfcf3ef 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,13 +7,29 @@
     <link rel="stylesheet" href="assets/css/style.css">
   </head>
   <body>
-    <h1>Pan & Zoom SVG Element with CSS/JavaScript</h1>
-
-    <p>
-      Click and drag the image to pan. Use the mouse wheel to zoom in and out.
-    </p>
-
-    <object type="image/svg+xml" data="assets/images/image.svg"></object>
+    <!--<object type="image/svg+xml" data="assets/images/image.svg"></object>-->
+    <svg viewBox="-200 -150 400 300">
+      <defs>
+        <circle id="zoom-marker" cx="0" cy="0" r="30" fill="maroon" />
+        <circle id="pan-marker" cx="0" cy="0" r="20" fill="darkgray" />
+      </defs>
+      <g class="pan-zoom">
+        <use id="zm-1" href="#zoom-marker" x="-50" y="-50" />
+        <use id="zm-2" href="#zoom-marker" x="-50" y="50" />
+        <use id="zm-3" href="#zoom-marker" x="50" y="-50" />
+        <use id="zm-4" href="#zoom-marker" x="50" y="50" />
+      </g>
+      <g class="pan">
+        <use id="pm-1" href="#pan-marker" x="-50" y="-50" />
+        <use id="pm-2" href="#pan-marker" x="-50" y="50" />
+        <use id="pm-3" href="#pan-marker" x="50" y="-50" />
+        <use id="pm-4" href="#pan-marker" x="50" y="50" />
+      </g>
+      <g>
+        <!--<circle id="pointer" cx="0" cy="0" r="5" fill="red" stroke="maroon"/>-->
+        <circle cx="0" cy="0" r="1" fill="white" />
+      </g>
+    </svg>
     <script src="app.js"></script>
   </body>
 </html>