4 files changed, 20 insertions, 56 deletions
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index db47790..0596f4e 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -1,40 +1,17 @@
 body {
   text-align: center;
-  max-width: 100vw;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
 }
 
-.container {
+object {
   padding: 0;
-  max-width: 586.033px;
-  max-height: 586.033px;
-  margin: 0 auto;
-  overflow: hidden;
+  margin: 5px;
   border: 1px solid steelblue;
   background-color: gray;
-}
-
-img, object {
   touch-action: none;
-}
-
-img {
-  max-width: 100%;
-  border: 1px solid silver;
-  transform: scale(0.9);
-}
-
-.container object, .container.switch img {
   display: block;
-}
-
-.container img, .container.switch object {
-  display: none;
-}
-
-button .button-text.raster, button.switch .button-text.svg {
-  display: none;
-}
-
-button.switch .button-text.raster {
-  display: inline;
+  min-height: 0;
 }
diff --git a/public/assets/images/41156165560-4438592e93-o.webp b/public/assets/images/41156165560-4438592e93-o.webp
deleted file mode 100644
index 2ad3fa4..0000000
--- a/public/assets/images/41156165560-4438592e93-o.webp
+++ /dev/null
diff --git a/public/assets/images/image.svg b/public/assets/images/image.svg
index 29f9306..a823339 100644
--- a/public/assets/images/image.svg
+++ b/public/assets/images/image.svg
@@ -1,22 +1,20 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<?xml version="1.0" standalone="yes"?>
 <svg viewBox="-200 -150 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <style>
-    svg {
-      overflow: hidden;
-      border: 1px solid silver;
-      transform: scale(0.9);
-    }
-
     circle, rect {
       fill-opacity: 0.9;
-      filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, .5));
     }
   </style>
+
+  <g>
+    <circle id="pointer" cx="0" cy="0" r="5" fill="red" stroke="maroon"/>
+  </g>
+
   <script type="text/javascript">//<![CDATA[
     const svgns = 'http://www.w3.org/2000/svg',
       svg = document.querySelector('svg'),
+      group = svg.querySelector('g'),
+      pointerEl = svg.querySelector('#pointer'),
       { x: vbX, y: vbY, width: vbWidth, height: vbHeight } = svg.viewBox.baseVal,
 
       shapeCount = 100,
@@ -103,6 +101,6 @@
 
     [...Array(shapeCount)]
       .map(() => getRandomFillAndStrokeVals())
-      .forEach(fillAndStrokeVal => svg.appendChild(getRandomShape(fillAndStrokeVal)));
+      .forEach(fillAndStrokeVal => pointerEl.before(getRandomShape(fillAndStrokeVal)));
   //]]></script>
 </svg>
diff --git a/public/index.html b/public/index.html
index 35a3030..d97baee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,28 +3,17 @@
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>JavaScript/CSS Pan & Zoom Demo</title>
+    <title>SVG Element Pan & Zoom Demo</title>
     <link rel="stylesheet" href="assets/css/style.css">
   </head>
   <body>
-    <h1>Pan & Zoom an Element with CSS/JavaScript</h1>
+    <h1>Pan & Zoom SVG Element with CSS/JavaScript</h1>
 
     <p>
-      Click and drag on the image to pan. Use the mouse wheel
-      to zoom in and out.
+      Click and drag the image to pan. Use the mouse wheel to zoom in and out.
     </p>
 
-    <p>
-      <button>
-        <span class="button-text svg">Raster image</span>
-        <span class="button-text raster">SVG image</span>
-      </button>
-    </p>
-
-    <div class="container">
-      <object type="image/svg+xml" data="assets/images/image.svg"></object>
-      <img src="assets/images/41156165560-4438592e93-o.webp"/>
-    </div>
+    <object type="image/svg+xml" data="assets/images/image.svg"></object>
     <script src="app.js"></script>
   </body>
 </html>