before liquid glass

src/components/meshBackground.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="background-canvas-wrapper" class="flex fit column">
+  <div id="background-canvas-wrapper" class="flex fit column bg-base">
     <canvas id="canvas"/>
   </div>
 </template>
@@ -8,8 +8,6 @@
 
 import { onMounted } from 'vue'
 
-
-
 onMounted(() => {
   const canvasBody = document.getElementById("canvas")
   const drawArea = canvasBody.getContext("2d")
@@ -39,9 +37,7 @@ onMounted(() => {
 
   function deBouncer () {
     clearTimeout(tid)
-    tid = setTimeout(function() {
-        resizeReset()
-    }, delay)
+    tid = setTimeout(function () { resizeReset() }, delay)
   }
 
   function checkDistance (x1, y1, x2, y2) { 
@@ -49,83 +45,81 @@ onMounted(() => {
   }
 
   function setup () { 
-    
     resizeReset()
-    for (let i = 0; i < opts.particleAmount; i++){
+    for (let i = 0; i < opts.particleAmount; i++) {
       particles.push(new Particle())
     }
     window.requestAnimationFrame(loop)
   }
 
-function loop() { 
-  window.requestAnimationFrame(loop)
-  drawArea.clearRect(0, 0, w, h)
-  for (let i = 0; i < particles.length; i++){
-    particles[i].update()
-    particles[i].draw()
+  function loop() { 
+    window.requestAnimationFrame(loop)
+    drawArea.clearRect(0, 0, w, h)
+    for (let i = 0; i < particles.length; i++) {
+      particles[i].update()
+      particles[i].draw()
+    }
+    for (let i = 0; i < particles.length; i++) {
+      linkPoints(particles[i], particles)
+    }
   }
-  for (let i = 0; i < particles.length; i++){
-    linkPoints(particles[i], particles)
+
+  function linkPoints (point1, hubs) { 
+    for (let i = 0; i < hubs.length; i++) {
+      const distance = checkDistance(point1.x, point1.y, hubs[i].x, hubs[i].y)
+      const opacity = 1 - distance / opts.linkRadius
+      if (opacity > 0) { 
+        drawArea.lineWidth = 0.5
+        drawArea.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`
+        drawArea.beginPath()
+        drawArea.moveTo(point1.x, point1.y)
+        drawArea.lineTo(hubs[i].x, hubs[i].y)
+        drawArea.closePath()
+        drawArea.stroke()
+      }
+    }
   }
-}
 
-
-function linkPoints (point1, hubs){ 
-  for (let i = 0; i < hubs.length; i++) {
-    const distance = checkDistance(point1.x, point1.y, hubs[i].x, hubs[i].y)
-    const opacity = 1 - distance / opts.linkRadius
-    if (opacity > 0) { 
-      drawArea.lineWidth = 0.5
-      drawArea.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`
+  function Particle () { 
+    this.x = Math.random() * w
+    this.y = Math.random() * h
+    this.speed = opts.defaultSpeed + Math.random() * opts.variantSpeed
+    this.directionAngle = Math.floor(Math.random() * 360)
+    this.color = opts.particleColor
+    this.radius = opts.defaultRadius + Math.random() * opts. variantRadius
+    this.vector = {
+      x: Math.cos(this.directionAngle) * this.speed,
+      y: Math.sin(this.directionAngle) * this.speed
+    }
+    this.update = function () { 
+      this.border()
+      this.x += this.vector.x
+      this.y += this.vector.y
+    }
+    this.border = function () { 
+      if (this.x >= w || this.x <= 0) { 
+        this.vector.x *= -1
+      }
+      if (this.y >= h || this.y <= 0) {
+        this.vector.y *= -1
+      }
+      if (this.x > w) this.x = w
+      if (this.y > h) this.y = h
+      if (this.x < 0) this.x = 0
+      if (this.y < 0) this.y = 0
+    }
+    this.draw = function () { 
       drawArea.beginPath()
-      drawArea.moveTo(point1.x, point1.y)
-      drawArea.lineTo(hubs[i].x, hubs[i].y)
+      drawArea.arc(this.x, this.y, this.radius, 0, Math.PI*2)
       drawArea.closePath()
-      drawArea.stroke()
+      drawArea.fillStyle = this.color
+      drawArea.fill()
     }
   }
-}
 
-function Particle () { 
-  this.x = Math.random() * w
-  this.y = Math.random() * h
-  this.speed = opts.defaultSpeed + Math.random() * opts.variantSpeed
-  this.directionAngle = Math.floor(Math.random() * 360)
-  this.color = opts.particleColor
-  this.radius = opts.defaultRadius + Math.random() * opts. variantRadius
-  this.vector = {
-    x: Math.cos(this.directionAngle) * this.speed,
-    y: Math.sin(this.directionAngle) * this.speed
-  };
-  this.update = function(){ 
-    this.border(); 
-    this.x += this.vector.x
-    this.y += this.vector.y
-  };
-  this.border = function(){ 
-    if (this.x >= w || this.x <= 0) { 
-      this.vector.x *= -1;
-    }
-    if (this.y >= h || this.y <= 0) {
-      this.vector.y *= -1;
-    }
-    if (this.x > w) this.x = w
-    if (this.y > h) this.y = h
-    if (this.x < 0) this.x = 0
-    if (this.y < 0) this.y = 0
-  }
-  this.draw = function(){ 
-    drawArea.beginPath()
-    drawArea.arc(this.x, this.y, this.radius, 0, Math.PI*2)
-    drawArea.closePath()
-    drawArea.fillStyle = this.color
-    drawArea.fill()
-  }
-}
-
-window.addEventListener("resize", function(){ deBouncer() })
-resizeReset()
-setup()
+  window.addEventListener("resize", function () { deBouncer() })
+  resizeReset()
+  setup()
 })
 
 </script>
@@ -137,7 +131,6 @@ setup()
   top: 0;
   left: 0;
   z-index: -1;
-  background: var(--q-primary);
   margin: 0;
   min-height: 100%;
 }