chore: renamed deprecated examples

limbo-works · Jan 27, 2025 · 25d844f · 25d844f
1 parent 030db3a
commit 25d844f
Show file tree

Hide file tree

Showing 18 changed files with 93 additions and 0 deletions.
diff --git a/x-4-2-animation-basics/ignore.css → old-4-2-animation-basics/ignore.css b/x-4-2-animation-basics/ignore.css → old-4-2-animation-basics/ignore.css
diff --git a/x-4-2-animation-basics/ignore.js → old-4-2-animation-basics/ignore.js b/x-4-2-animation-basics/ignore.js → old-4-2-animation-basics/ignore.js
diff --git a/x-4-2-animation-basics/index.html → old-4-2-animation-basics/index.html b/x-4-2-animation-basics/index.html → old-4-2-animation-basics/index.html
diff --git a/x-4-3-loop-live/index.html → old-4-3-loop-live/index.html b/x-4-3-loop-live/index.html → old-4-3-loop-live/index.html
diff --git a/x-4-3-loop-live/scripts.js → old-4-3-loop-live/scripts.js b/x-4-3-loop-live/scripts.js → old-4-3-loop-live/scripts.js
diff --git a/x-4-3-loop-live/styles.css → old-4-3-loop-live/styles.css b/x-4-3-loop-live/styles.css → old-4-3-loop-live/styles.css
diff --git a/x-4-4-interpolation/index.html → old-4-4-interpolation/index.html b/x-4-4-interpolation/index.html → old-4-4-interpolation/index.html
diff --git a/x-4-4-interpolation/scripts.js → old-4-4-interpolation/scripts.js b/x-4-4-interpolation/scripts.js → old-4-4-interpolation/scripts.js
diff --git a/x-4-4-interpolation/styles.css → old-4-4-interpolation/styles.css b/x-4-4-interpolation/styles.css → old-4-4-interpolation/styles.css
diff --git a/x-4-5-loop-interpolation-live/index.html → old-4-5-loop-interpolation-live/index.html b/x-4-5-loop-interpolation-live/index.html → old-4-5-loop-interpolation-live/index.html
diff --git a/x-4-5-loop-interpolation-live/scripts.js → old-4-5-loop-interpolation-live/scripts.js b/x-4-5-loop-interpolation-live/scripts.js → old-4-5-loop-interpolation-live/scripts.js
diff --git a/x-4-5-loop-interpolation-live/styles.css → old-4-5-loop-interpolation-live/styles.css b/x-4-5-loop-interpolation-live/styles.css → old-4-5-loop-interpolation-live/styles.css
diff --git a/x-4-6-clippath-mouse/index.html → old-4-6-clippath-mouse/index.html b/x-4-6-clippath-mouse/index.html → old-4-6-clippath-mouse/index.html
diff --git a/x-4-6-clippath-mouse/scripts.js → old-4-6-clippath-mouse/scripts.js b/x-4-6-clippath-mouse/scripts.js → old-4-6-clippath-mouse/scripts.js
diff --git a/x-4-6-clippath-mouse/styles.css → old-4-6-clippath-mouse/styles.css b/x-4-6-clippath-mouse/styles.css → 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
@@ -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
@@ -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
@@ -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%;
+    }
+}