Attempt #1

Author: devanSAGA

src/App.css

@@ -9,3 +9,14 @@
   margin: 0 auto;
   padding: 0 2rem;
 }
+
+canvas {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+  aspect-ratio: auto 1920 / 948;
+  opacity: 0.5;
+}

src/App.js

@@ -17,10 +17,59 @@ class App extends Component {
             <Route path="/about" component={AboutMe} />
             <Route path="/goals" component={OKRPage} />
           </Switch>
+          <BackgroundCanvas />
         </div>
       </BrowserRouter>
     );
   }
 }
 
+function BackgroundCanvas() {
+  const canvasRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas.getContext('2d');
+    let time = 0;
+    let animationFrameId;
+
+    const color = function (x, y, r, g, b) {
+        context.fillStyle = `rgb(${r}, ${g}, ${b})`;
+        context.fillRect(x, y, 1, 1);
+    }
+
+    const R = function (x, y, time) {
+        return (Math.floor(192 + 64 * Math.cos((x * x - y * y) / 300 + time)));
+    }
+
+    const G = function (x, y, time) {
+        return (Math.floor(192 + 64 * Math.sin((x * x * Math.cos(time / 4) + y * y * Math.sin(time / 3)) / 300)));
+    }
+
+    const B = function (x, y, time) {
+        return (Math.floor(192 + 64 * Math.sin(5 * Math.sin(time / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100)));
+    }
+
+    const startAnimation = function () {
+        for (let x = 0; x <= 30; x++) {
+            for (let y = 0; y <= 30; y++) {
+                color(x, y, R(x, y, time), G(x, y, time), B(x, y, time));
+            }
+        }
+        time = time + 0.120;
+        animationFrameId = window.requestAnimationFrame(startAnimation);
+    }
+    startAnimation()
+   
+    return () => {
+      window.cancelAnimationFrame(animationFrameId)
+    }
+  }, []);
+
+  return (
+    <canvas ref={canvasRef} className="background-gradient" width="32" height="32"></canvas>
+  );
+}
+
 export default App;
+

src/index.css

@@ -22,4 +22,4 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: #f4f9f9;
-}
+}

src/pages/OKRPage.js

@@ -143,12 +143,12 @@ function OKRPage() {
       <KeyResultList>
         <KeyResultListItem
           label="180km Cycling"
-          progress={{ current: 17, target: 180, unit: "km" }}
+          progress={{ current: 30.5, target: 180, unit: "km" }}
           showProgress={showProgress}
         />
         <KeyResultListItem
           label="180km Walking"
-          progress={{ current: 50, target: 180, unit: "km" }}
+          progress={{ current: 89, target: 180, unit: "km" }}
           showProgress={showProgress}
         />
         <KeyResultListItem