background gradients refactoring

src/assets/main.scss

@@ -6,7 +6,7 @@
 @import "./fonts/snap_it/snap_it.css";
 
 body{
-  // background-color: $back;
+  background-color: $back;
 }
 
 #app{
@@ -38,8 +38,12 @@ body{
 
   #map-backgrounds{
     .map-bg-canvas{
+      mix-blend-mode: multiply;
+      // filter: contrast(170%);
+      &.gradient{
+        // filter: blur(10px);
+      }
       &.trame{
-        mix-blend-mode: multiply;
         // display:none;
       }
     }

src/components/MapBackground.vue

@@ -52,21 +52,39 @@ export default {
       }
       console.log(gradients);
       let custDir;
+      // switch (direction) {
+      //   case 1:
+      //     custDir = {
+      //       x0: `${Math.random() * canvas.width}px`,
+      //       y0: `-100px`,
+      //       x1: `${Math.random() * canvas.width}px`,
+      //       y1: `${canvas.height + 100}px`
+      //     }  
+      //     break;
+      //   case 2:
+      //     custDir = {
+      //       x0: `-100px`,
+      //       y0: `${Math.random() * canvas.height}px`,
+      //       x1: `${canvas.width + 100}px`,
+      //       y1: `${Math.random() * canvas.height}px`
+      //     }  
+      //     break;
+      // }
       switch (direction) {
         case 1:
           custDir = {
-            x0: `${Math.random() * canvas.width}px`,
+            x0: `${Math.random() * canvas.width/3}px`,
             y0: `-100px`,
-            x1: `${Math.random() * canvas.width}px`,
+            x1: `${canvas.width/3*2 + Math.random() * canvas.width/3}px`,
             y1: `${canvas.height + 100}px`
           }  
           break;
         case 2:
           custDir = {
-            x0: `-100px`,
-            y0: `${Math.random() * canvas.height}px`,
-            x1: `${canvas.width + 100}px`,
-            y1: `${Math.random() * canvas.height}px`
+            x0: `${canvas.width/3*2 + Math.random() * canvas.width/3}px`,
+            y0: `-100px`,
+            x1: `${Math.random() * canvas.width/3}px`,
+            y1: `${canvas.height + 100}px`
           }  
           break;
       }
@@ -78,7 +96,7 @@ export default {
         states : {
           "default-state": {
             gradients: gradients,
-            transitionSpeed: 60000
+            transitionSpeed: 20000 + Math.random() * 20000
           }
         },
       })
@@ -87,7 +105,7 @@ export default {
       let h = !hue ? Math.floor(Math.random()*360) : hue + -30 + Math.floor(Math.random()*60);
       let s = 40 + Math.floor(Math.random()*20);
       let l = 40 + Math.floor(Math.random()*10);
-      let a = `${parseFloat(Math.random()*.9).toFixed(3)}`.slice(1);
+      let a = `${parseFloat(0.2 + Math.random()*.4).toFixed(3)}`.slice(1);
       let hsla = `hsla(${h}, ${s}%, ${l}%, ${a})`;
       // console.log(hsla);
       return hsla;
@@ -119,8 +137,8 @@ export default {
 
 <template>
   <canvas class="map-bg-canvas gradient" ref="canvas-background-gradient1"></canvas>
-  <canvas class="map-bg-canvas gradient" ref="canvas-background-gradient2"></canvas>
   <canvas class="map-bg-canvas trame" ref="canvas-background-trame"></canvas>
+  <canvas class="map-bg-canvas gradient" ref="canvas-background-gradient2"></canvas>
 </template>
 
 <style lang="css" scoped>