fix: minor corrections

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

Hide file tree

Showing 3 changed files with 37 additions and 23 deletions.
diff --git a/1-2-clippath/index.html b/1-2-clippath/index.html
@@ -9,7 +9,7 @@
   <body>
     <header>
       <div></div>
-      <a href="../2-1-svg-stroke/index.html"></a>
+      <a href="../2-1-css-filters/index.html"></a>
     </header>
 
     <div

diff --git a/4-1-svg-masks/index.html b/4-1-svg-masks/index.html
@@ -9,9 +9,35 @@
   <body>
     <header>
       <div></div>
-      <a href="../4-1-mouse/index.html"></a>
+      <a href="../5-1-svg-filters/index.html"></a>
     </header>
 
-    <div><!-- Content here --></div>
+    <div
+      class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex gap-[64px]"
+    >
+      <div id="target-1" class="target">
+        <div class="inner"></div>
+        <div></div>
+        <span>Regular</span>
+      </div>
+
+      <div id="target-2" class="target">
+        <div class="inner"></div>
+        <div></div>
+        <span>Circle mask:<br />circle(50%)</span>
+      </div>
+
+      <div id="target-3" class="target">
+        <div class="inner"></div>
+        <div></div>
+        <span>clip-path:<br />xywh(20% 10% 70% 50%)</span>
+      </div>
+
+      <div id="target-4" class="target">
+        <div class="inner"></div>
+        <div></div>
+        <span>clip-path:<br />polygon(0 0, 100% 0, 100% 100%, 0 50%)</span>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/5-1-svg-filters/index.html b/5-1-svg-filters/index.html
@@ -1,37 +1,25 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>5.1: Svg Filters</title>
+    <title>3.1: CSS 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>
+      <a href="../5-2-svg-filters/index.html"></a>
     </header>
 
     <div
-      class="outer-square flex justify-center items-center flex-col h-[80vh]"
+      class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px]"
     >
-      <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>
+      <!-- This is the cool stuff. -->
+      <svg viewBox="0 0 1000 1000">
+        <circle cx="250" cy="500" r="250" fill="var(--color-beige)" />
+        <circle cx="750" cy="500" r="250" fill="var(--color-beige)" />
+      </svg>
     </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>