From 25d844fc0c5714d23a158ee5ecd1c85454ff2ee3 Mon Sep 17 00:00:00 2001
From: Aske Lange <44546482+AskeLange@users.noreply.github.com>
Date: Mon, 27 Jan 2025 13:36:38 +0100
Subject: [PATCH] chore: renamed deprecated examples

---
 .../ignore.css                                |  0
 .../ignore.js                                 |  0
 .../index.html                                |  0
 .../index.html                                |  0
 .../scripts.js                                |  0
 .../styles.css                                |  0
 .../index.html                                |  0
 .../scripts.js                                |  0
 .../styles.css                                |  0
 .../index.html                                |  0
 .../scripts.js                                |  0
 .../styles.css                                |  0
 .../index.html                                |  0
 .../scripts.js                                |  0
 .../styles.css                                |  0
 old-5-1-svg-filters/index.html                | 37 ++++++++++++++
 old-5-1-svg-filters/scripts.js                |  8 ++++
 old-5-1-svg-filters/styles.css                | 48 +++++++++++++++++++
 18 files changed, 93 insertions(+)
 rename {x-4-2-animation-basics => old-4-2-animation-basics}/ignore.css (100%)
 rename {x-4-2-animation-basics => old-4-2-animation-basics}/ignore.js (100%)
 rename {x-4-2-animation-basics => old-4-2-animation-basics}/index.html (100%)
 rename {x-4-3-loop-live => old-4-3-loop-live}/index.html (100%)
 rename {x-4-3-loop-live => old-4-3-loop-live}/scripts.js (100%)
 rename {x-4-3-loop-live => old-4-3-loop-live}/styles.css (100%)
 rename {x-4-4-interpolation => old-4-4-interpolation}/index.html (100%)
 rename {x-4-4-interpolation => old-4-4-interpolation}/scripts.js (100%)
 rename {x-4-4-interpolation => old-4-4-interpolation}/styles.css (100%)
 rename {x-4-5-loop-interpolation-live => old-4-5-loop-interpolation-live}/index.html (100%)
 rename {x-4-5-loop-interpolation-live => old-4-5-loop-interpolation-live}/scripts.js (100%)
 rename {x-4-5-loop-interpolation-live => old-4-5-loop-interpolation-live}/styles.css (100%)
 rename {x-4-6-clippath-mouse => old-4-6-clippath-mouse}/index.html (100%)
 rename {x-4-6-clippath-mouse => old-4-6-clippath-mouse}/scripts.js (100%)
 rename {x-4-6-clippath-mouse => old-4-6-clippath-mouse}/styles.css (100%)
 create mode 100644 old-5-1-svg-filters/index.html
 create mode 100644 old-5-1-svg-filters/scripts.js
 create mode 100644 old-5-1-svg-filters/styles.css

diff --git a/x-4-2-animation-basics/ignore.css b/old-4-2-animation-basics/ignore.css
similarity index 100%
rename from x-4-2-animation-basics/ignore.css
rename to old-4-2-animation-basics/ignore.css
diff --git a/x-4-2-animation-basics/ignore.js b/old-4-2-animation-basics/ignore.js
similarity index 100%
rename from x-4-2-animation-basics/ignore.js
rename to old-4-2-animation-basics/ignore.js
diff --git a/x-4-2-animation-basics/index.html b/old-4-2-animation-basics/index.html
similarity index 100%
rename from x-4-2-animation-basics/index.html
rename to old-4-2-animation-basics/index.html
diff --git a/x-4-3-loop-live/index.html b/old-4-3-loop-live/index.html
similarity index 100%
rename from x-4-3-loop-live/index.html
rename to old-4-3-loop-live/index.html
diff --git a/x-4-3-loop-live/scripts.js b/old-4-3-loop-live/scripts.js
similarity index 100%
rename from x-4-3-loop-live/scripts.js
rename to old-4-3-loop-live/scripts.js
diff --git a/x-4-3-loop-live/styles.css b/old-4-3-loop-live/styles.css
similarity index 100%
rename from x-4-3-loop-live/styles.css
rename to old-4-3-loop-live/styles.css
diff --git a/x-4-4-interpolation/index.html b/old-4-4-interpolation/index.html
similarity index 100%
rename from x-4-4-interpolation/index.html
rename to old-4-4-interpolation/index.html
diff --git a/x-4-4-interpolation/scripts.js b/old-4-4-interpolation/scripts.js
similarity index 100%
rename from x-4-4-interpolation/scripts.js
rename to old-4-4-interpolation/scripts.js
diff --git a/x-4-4-interpolation/styles.css b/old-4-4-interpolation/styles.css
similarity index 100%
rename from x-4-4-interpolation/styles.css
rename to old-4-4-interpolation/styles.css
diff --git a/x-4-5-loop-interpolation-live/index.html b/old-4-5-loop-interpolation-live/index.html
similarity index 100%
rename from x-4-5-loop-interpolation-live/index.html
rename to old-4-5-loop-interpolation-live/index.html
diff --git a/x-4-5-loop-interpolation-live/scripts.js b/old-4-5-loop-interpolation-live/scripts.js
similarity index 100%
rename from x-4-5-loop-interpolation-live/scripts.js
rename to old-4-5-loop-interpolation-live/scripts.js
diff --git a/x-4-5-loop-interpolation-live/styles.css b/old-4-5-loop-interpolation-live/styles.css
similarity index 100%
rename from x-4-5-loop-interpolation-live/styles.css
rename to old-4-5-loop-interpolation-live/styles.css
diff --git a/x-4-6-clippath-mouse/index.html b/old-4-6-clippath-mouse/index.html
similarity index 100%
rename from x-4-6-clippath-mouse/index.html
rename to old-4-6-clippath-mouse/index.html
diff --git a/x-4-6-clippath-mouse/scripts.js b/old-4-6-clippath-mouse/scripts.js
similarity index 100%
rename from x-4-6-clippath-mouse/scripts.js
rename to old-4-6-clippath-mouse/scripts.js
diff --git a/x-4-6-clippath-mouse/styles.css b/old-4-6-clippath-mouse/styles.css
similarity index 100%
rename from x-4-6-clippath-mouse/styles.css
rename to old-4-6-clippath-mouse/styles.css
diff --git a/old-5-1-svg-filters/index.html b/old-5-1-svg-filters/index.html
new file mode 100644
index 0000000..da27c88
--- /dev/null
+++ b/old-5-1-svg-filters/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>5.1: Svg Filters</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="../overall.css" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="scripts.js"></script>
+  </head>
+  <body>
+    <header>
+      <div></div>
+    </header>
+
+    <div
+      class="outer-square flex justify-center items-center flex-col h-[80vh]"
+    >
+      <div class="circle w-[100px] h-[100px]"></div>
+      <div class="square w-400 h-400 border-primary-text grid">
+        <div class="big-circle w-[320px] h-[320px]"></div>
+      </div>
+    </div>
+    <svg class="hidden">
+      <defs>
+        <filter id="filter" x="0" y="0" width="100%" height="100%">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
+          <feColorMatrix
+            in="blur"
+            mode="matrix"
+            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
+            result="goo"
+          />
+        </filter>
+      </defs>
+    </svg>
+  </body>
+</html>
diff --git a/old-5-1-svg-filters/scripts.js b/old-5-1-svg-filters/scripts.js
new file mode 100644
index 0000000..dc52fdb
--- /dev/null
+++ b/old-5-1-svg-filters/scripts.js
@@ -0,0 +1,8 @@
+document.addEventListener("DOMContentLoaded", function () {
+    document.addEventListener("mousemove", function (e) {
+        const x = e.clientX;
+        const y = e.clientY;
+        document.documentElement.style.setProperty("--x", `${x}px`);
+        document.documentElement.style.setProperty("--y", `${y}px`);
+    });
+});
diff --git a/old-5-1-svg-filters/styles.css b/old-5-1-svg-filters/styles.css
new file mode 100644
index 0000000..df46fbb
--- /dev/null
+++ b/old-5-1-svg-filters/styles.css
@@ -0,0 +1,48 @@
+body {
+    //cursor: none;
+}
+
+.circle {
+    border-radius: 50%;
+    background-color: var(--color-beige);
+    translate: var(--x) var(--y);
+    position: absolute;
+    top: -50px;
+    left: -50px;
+    pointer-events: none;
+    grid-area: 1 / 1;
+    transition: scale 0.5s ease-in-out;
+}
+.big-circle {
+    background-color: var(--color-beige);
+    border-radius: 61% 39% 76% 24% / 55% 48% 52% 45%;
+    animation: wobble 7s ease-in-out alternate infinite;
+    /* -webkit-transform: translate3d(0, 0, 0); */
+}
+.square {
+    place-content: center;
+    place-items: center;
+}
+.outer-square {
+    margin-left: -50px;
+    padding-left: 50px;
+    filter: url(#filter);
+}
+.big-circle {
+    grid-area: 1 / 1;
+}
+
+@keyframes wobble {
+    25% {
+        border-radius: 41% 59% 49% 51% / 35% 31% 69% 65%;
+    }
+    50% {
+        border-radius: 51% 49% 43% 57% / 53% 30% 70% 47%;
+    }
+    75% {
+        border-radius: 50% 50% 61% 39% / 57% 27% 73% 43%;
+    }
+    100% {
+        border-radius: 31% 69% 57% 43% / 38% 62% 38% 62%;
+    }
+}