From e4223ce02c8b681fd8327c222da52ae6d462fbeb Mon Sep 17 00:00:00 2001
From: lilith <contact@traumweh.dev>
Date: Mon, 10 Feb 2025 00:24:21 +0100
Subject: [PATCH] Updated SVG filter (+auto-formatting)

---
 styleguide/generator/index.html | 102 ++++++++++++++++----------------
 1 file changed, 51 insertions(+), 51 deletions(-)
diff --git a/styleguide/generator/index.html b/styleguide/generator/index.html
index ce2b5d0..726082b 100644
--- a/styleguide/generator/index.html
+++ b/styleguide/generator/index.html
@@ -1,78 +1,78 @@
 <!doctype html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
 </head>
+
 <body style="height: 100vh;">
 
-<div style="display: flex; flex-direction: column; gap: 1em; align-items: center">
+  <div style="display: flex; flex-direction: column; gap: 1em; align-items: center">
 
     <div>
-        <input id="file_input" type="file" name="image" accept="image/*">
+      <input id="file_input" type="file" name="image" accept="image/*">
     </div>
 
     <img id="source_img" src=""
-         style="width: 400px; height: 300px; border: solid 4px darkblue; background-color: darkblue; object-fit: contain;"/>
+      style="width: 400px; height: 300px; border: solid 4px darkblue; background-color: darkblue; object-fit: contain;" />
     <img id="result_img" src=""
-         style="width: 400px; height: 300px; border: solid 4px darkgreen; background-color: darkgreen; object-fit: contain;"/>
+      style="width: 400px; height: 300px; border: solid 4px darkgreen; background-color: darkgreen; object-fit: contain;" />
 
     <div style="display: none;">
-        <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
-            <filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
-                    primitiveUnits="userSpaceOnUse">
-                <feTurbulence type="turbulence" baseFrequency="0 0.1" numOctaves="1" result="noise"/>
-                <feDisplacementMap in="SourceGraphic" in2="noise" result="distorted" scale="20"/>
-                <feColorMatrix in="distorted" type="saturate" values="0" result="bw"/>
-                <feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa"/>
-                <feComponentTransfer in="ltoa" result="ltoa_inverse">
-                    <feFuncA type="table" tableValues="0 1"/>
-                </feComponentTransfer>
-                <feConvolveMatrix
-                        in="ltoa_inverse"
-                        result="edges"
-                        kernelMatrix="-2 0 -2
-                    0 0 0
-                    2 0 2"/>
+      <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
+        <filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
+          primitiveUnits="objectBoundingBox">
+          <feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw" />
+          <feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" />
+          <feComponentTransfer in="ltoa" result="ltoa_inverse">
+            <feFuncA type="table" tableValues="0 1" />
+          </feComponentTransfer>
 
-                <feComponentTransfer in="edges" result="pink">
-                    <feFuncR type="table" tableValues="1 0"/>
-                    <feFuncG type="table" tableValues="0 1"/>
-                    <feFuncB type="table" tableValues="0.1 0"/>
-                </feComponentTransfer>
-                <feOffset in="pink" result="pink_shift" dx="-4" dy="0"/>
+          <feConvolveMatrix in="ltoa_inverse" result="pink_edges" kernelMatrix="-4 0 4 0 0 0 -4 0 4" />
+          <feComponentTransfer in="pink_edges" result="pink">
+            <feFuncR type="table" tableValues="0.7765 0" />
+            <feFuncG type="table" tableValues="0.1451 0" />
+            <feFuncB type="table" tableValues="0.4902 0" />
+          </feComponentTransfer>
+          <feOffset in="pink" result="pink_shift" dx="-0.002" />
 
-                <feComponentTransfer in="edges" result="cyan">
-                    <feFuncR type="table" tableValues="0.1 0"/>
-                    <feFuncG type="table" tableValues="1 0"/>
-                    <feFuncB type="table" tableValues="1 0"/>
-                </feComponentTransfer>
-                <feOffset in="cyan" result="cyan_shift" dx="4" dy="0"/>
+          <feConvolveMatrix in="ltoa_inverse" result="cyan_edges" kernelMatrix="4 0 -4 0 0 0 4 0 -4" />
+          <feComponentTransfer in="cyan_edges" result="cyan">
+            <feFuncR type="table" tableValues="0.2941 0" />
+            <feFuncG type="table" tableValues="0.6784 0" />
+            <feFuncB type="table" tableValues="0.8471 0" />
+          </feComponentTransfer>
+          <feOffset in="cyan" result="cyan_shift" dx="0.002" />
 
-                <feMerge result="pink_cyan_shift">
-                    <feMergeNode in="distorted"/>
-                    <feMergeNode in="pink_shift"/>
-                    <feMergeNode in="cyan_shift"/>
-                </feMerge>
-            </filter>
+          <feMerge result="pink_cyan_shift">
+            <feMergeNode in="SourceGraphic" />
+            <feMergeNode in="pink_shift" />
+            <feMergeNode in="cyan_shift" />
+          </feMerge>
 
-            <rect fill="#000000" width="100%" height="100%"/>
-            <g filter="url(#filter0)">
-                <image href="" width="100%" height="100%"/>
-            </g>
-        </svg>
+          <feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise" />
+          <feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02" />
+          <feOffset in="distorted_raw" result="distorted" />
+        </filter>
+
+        <g filter="url(#filter0)">
+          <image href="" width="100%" height="100%" />
+        </g>
+      </svg>
     </div>
 
     <button id="download" disabled>
-        Download Result
+      Download Result
     </button>
 
-</div>
+  </div>
 
 
-<script src="generator.js" type="text/javascript"></script>
+  <script src="generator.js" type="text/javascript"></script>
 </body>
+
 </html>
\ No newline at end of file
