draw circles with js

src/components/VizTitle.vue

@@ -2,11 +2,26 @@
   <header id="grid-container">
     <div id="title-container" :class="{ mobile: mobileView }">
       <img
+        ref="heroImage"
         id="title-image"
         :class="{ mobile: mobileView }"
         src="@/assets/images/hero_img_cutout_less-stylized_feather.png"
         alt="Social vulnerability and water insecurity"
+        @load="updateSvgDimensions"
       />
+      <svg ref="overlay" id="overlay" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <filter id="blueOverlay">
+            <feColorMatrix type="matrix" values="0 0 0 0 0
+                                                  0 0 0 0 0
+                                                  0 0 0 0 1
+                                                  0 0 0 1 0"/>
+          </filter>
+        </defs>
+        <circle cx="100" cy="100" r="50" fill="blue" filter="url(#blueOverlay)"/>
+        <circle cx="200" cy="150" r="30" fill="blue" filter="url(#blueOverlay)"/>
+        <circle cx="300" cy="200" r="70" fill="blue" filter="url(#blueOverlay)"/>
+      </svg>
         <h1>Unequal access to water</h1>
         <h3>
           How societal factors shape exposure to water-related hazards, likelihood to suffer harm, and ability to cope and recover from losses
@@ -16,10 +31,33 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { isMobile } from 'mobile-device-detect';
 
 const mobileView = ref(isMobile);
+const heroImage = ref(null);
+const overlay = ref(null);
+
+const updateSvgDimensions = () => {
+  if (heroImage.value && overlay.value) {
+    const { width, height, top, left } = heroImage.value.getBoundingClientRect();
+    overlay.value.setAttribute('width', width);
+    overlay.value.setAttribute('height', height);
+    overlay.value.style.width = `${width}px`;
+    overlay.value.style.height = `${height}px`;
+    overlay.value.style.top = `${top}px`;
+    overlay.value.style.left = `${left}px`;
+  }
+};
+
+onMounted(() => {
+  updateSvgDimensions();
+  window.addEventListener('resize', updateSvgDimensions);
+});
+
+watch(mobileView, () => {
+  updateSvgDimensions();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -59,4 +97,14 @@ h1, h3 {
   text-align: left;  
 }
 
+#overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* Ensure the SVG overlay doesn't interfere with other interactions */
+}
+
+
 </style>