From d94bd73ec165c9192f3bc89ccad5ce54b2d5b610 Mon Sep 17 00:00:00 2001
From: Sonia Ruiz <yune.vk@gmail.com>
Date: Tue, 29 Mar 2022 14:53:00 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20background=20noise?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/layout/Filter.jsx  | 16 ++++++++++++++++
 components/layout/Layout.jsx  | 17 +++++++++++------
 components/layout/layout.scss |  2 ++
 styles/base.scss              | 26 ++++++++++++++++++++++++++
 styles/tokens.scss            |  2 ++
 5 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 components/layout/Filter.jsx

diff --git a/components/layout/Filter.jsx b/components/layout/Filter.jsx
new file mode 100644
index 0000000..56b1004
--- /dev/null
+++ b/components/layout/Filter.jsx
@@ -0,0 +1,16 @@
+const Filter = () => {
+  return (
+    <svg id="noise-filter-wrapper">
+      <filter id="noise-filter">
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="6.29"
+          numOctaves="6"
+          stitchTiles="stitch"
+        />
+      </filter>
+    </svg>
+  )
+}
+
+export default Filter
diff --git a/components/layout/Layout.jsx b/components/layout/Layout.jsx
index 28a6cbc..dd53c4c 100644
--- a/components/layout/Layout.jsx
+++ b/components/layout/Layout.jsx
@@ -5,19 +5,24 @@ import { useBackground } from '../../contexts/BackgroundContext'
 import Footer from '../footer/Footer'
 import Header from '../header/Header'
 
+import Filter from './Filter'
+
 const Layout = ({ children }) => {
   const { animationStep } = useBackground()
 
   const classes = clsx('layout', { [`step-${animationStep}`]: true })
 
   return (
-    <div className={classes}>
-      <div className="layout__content">
-        <Header />
-        <main>{children}</main>
-        <Footer />
+    <>
+      <Filter />
+      <div className={classes}>
+        <div className="layout__content">
+          <Header />
+          <main>{children}</main>
+          <Footer />
+        </div>
       </div>
-    </div>
+    </>
   )
 }
 
diff --git a/components/layout/layout.scss b/components/layout/layout.scss
index 797f81a..03f902b 100644
--- a/components/layout/layout.scss
+++ b/components/layout/layout.scss
@@ -58,6 +58,8 @@
     position: relative;
     display: flex;
     flex-direction: column;
+
+    z-index: $index-content;
   }
 
   main {
diff --git a/styles/base.scss b/styles/base.scss
index 016a42e..89c5f00 100644
--- a/styles/base.scss
+++ b/styles/base.scss
@@ -15,3 +15,29 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
+// Background filter
+#noise-filter-wrapper {
+  display: none;
+}
+
+body::before {
+  position: fixed;
+  left: 0;
+  top: 0;
+  content: '';
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  mix-blend-mode: darken;
+  // mix-blend-mode: difference;
+  // mix-blend-mode: exclusion;
+  // mix-blend-mode: multiply;
+  opacity: 0.5;
+}
+
+body::before {
+  background: #fff;
+  filter: url(#noise-filter);
+  z-index: $index-filter;
+}
diff --git a/styles/tokens.scss b/styles/tokens.scss
index f39d1be..e5517e6 100644
--- a/styles/tokens.scss
+++ b/styles/tokens.scss
@@ -14,6 +14,8 @@ $purple: #6b00cf;
 $red: #e32e40;
 
 // Indexes
+$index-filter: 1;
+$index-content: 5;
 
 // Transitions
 $bezier-default: cubic-bezier(0.25, 0.1, 0.25, 1);