added vignette

Author: ashishkumar3

Diff for: snow.js

@@ -58,11 +58,27 @@ class Snow{
     }
   }
 
+  createVignette(){
+    const xMid = this.width/2;
+    const yMid = this.height/2;
+    const radius = Math.sqrt(xMid*xMid + yMid*yMid);
+    this.vignette = this.context.createRadialGradient(xMid, yMid, 0, xMid, yMid, radius);
+
+
+    this.vignette.addColorStop(0.49, `rgba(0, 0, 0, 0)`);
+    for(let i=0; i<=1; i+=0.1){
+      const alpha = Math.pow(i,3);
+      this.vignette.addColorStop(0.5+i*0.5, `rgba(0, 0, 0, ${alpha})`);
+    }
+  }
+
   onResize(){
     this.width = window.innerWidth;
     this.height = window.innerHeight;
     this.canvas.width = this.width;
     this.canvas.height = this.height;
+
+    this.createVignette();
   }
 
   update(){
@@ -81,6 +97,9 @@ class Snow{
       this.context.restore();
     }
 
+    this.context.fillStyle=this.vignette;
+    this.context.fillRect(0, 0, this.width, this.height);
+
     requestAnimationFrame(this.updateBound);
   }
 }

Diff for: styles.css

@@ -47,7 +47,7 @@ a{
 }
 
 @keyframes myanimation {
-  0% {background-color: rgb(133, 10, 138);} /*9D5D9F*/
+  0% {background-color: rgb(119, 6, 122);} /*9D5D9F*/
   25%{background-color:rgb(34, 29, 61);} /*#EA739C;*/
   50%{background-color:rgb(6, 20, 49);} /*#EC748A;*/
   75% {background-color: rgb(61, 14, 63);} /*975C9A*/