Update image glitch generator; change example image

styleguide/assets/script/generator.js

@@ -27,16 +27,10 @@ function loadImage(base64Image) {
   let svgDataUrl;
 
   sourceImage.onload = function () {
-    let svgWidth = this.width;
+    let svgViewBox = `0 0 ${Math.trunc(800 / this.height * this.width)} 800`;
-    let svgHeight = this.height;
+    svg.setAttribute("height", this.height);
-
+    svg.setAttribute("width", this.width);
-    if (this.height > 1000) {
+    svg.setAttribute("viewBox", svgViewBox);
-      svgHeight = 1000;
-      svgWidth = (1000 * this.width) / this.height;
-    }
-
-    svg.setAttribute("height", svgHeight);
-    svg.setAttribute("width", svgWidth);
 
     let svgString = new XMLSerializer().serializeToString(svg);
     svgDataUrl = "data:image/svg+xml," + encodeURIComponent(svgString);

styleguide/assets/style/base.css

@@ -122,6 +122,10 @@
   --color-shade-2: var(--color-dark-shade-2);
   --color-shade-3: var(--color-dark-shade-3);
   --color-shade-4: var(--color-dark-shade-4);
+  --color-text-1: var(--color-dark-text-1);
+  --color-text-2: var(--color-dark-text-2);
+  --color-text-3: var(--color-dark-text-3);
+  --color-text-4: var(--color-dark-text-4);
   --color-primary: var(--color-dark-primary);
   --color-secondary: var(--color-dark-secondary);
   --color-error: var(--color-dark-error);
@@ -160,6 +164,10 @@
   --color-shade-2: var(--color-light-shade-2);
   --color-shade-3: var(--color-light-shade-3);
   --color-shade-4: var(--color-light-shade-4);
+  --color-text-1: var(--color-light-text-1);
+  --color-text-2: var(--color-light-text-2);
+  --color-text-3: var(--color-light-text-3);
+  --color-text-4: var(--color-light-text-4);
   --color-primary: var(--color-light-primary);
   --color-secondary: var(--color-light-secondary);
   --color-error: var(--color-light-error);
@@ -191,6 +199,10 @@
     --color-shade-2: var(--color-dark-shade-2);
     --color-shade-3: var(--color-dark-shade-3);
     --color-shade-4: var(--color-dark-shade-4);
+    --color-text-1: var(--color-dark-text-1);
+    --color-text-2: var(--color-dark-text-2);
+    --color-text-3: var(--color-dark-text-3);
+    --color-text-4: var(--color-dark-text-4);
     --color-primary: var(--color-dark-primary);
     --color-secondary: var(--color-dark-secondary);
     --color-error: var(--color-dark-error);
@@ -228,6 +240,10 @@
     --color-shade-2: var(--color-light-shade-2);
     --color-shade-3: var(--color-light-shade-3);
     --color-shade-4: var(--color-light-shade-4);
+    --color-text-1: var(--color-light-text-1);
+    --color-text-2: var(--color-light-text-2);
+    --color-text-3: var(--color-light-text-3);
+    --color-text-4: var(--color-light-text-4);
     --color-primary: var(--color-light-primary);
     --color-secondary: var(--color-light-secondary);
     --color-error: var(--color-light-error);
@@ -263,6 +279,10 @@
     --color-shade-2: var(--color-light-shade-2);
     --color-shade-3: var(--color-light-shade-3);
     --color-shade-4: var(--color-light-shade-4);
+    --color-text-1: var(--color-light-text-1);
+    --color-text-2: var(--color-light-text-2);
+    --color-text-3: var(--color-light-text-3);
+    --color-text-4: var(--color-light-text-4);
     --color-primary: var(--color-light-primary);
     --color-secondary: var(--color-light-secondary);
     --color-error: var(--color-light-error);
@@ -292,6 +312,10 @@
     --color-shade-2: var(--color-dark-shade-2);
     --color-shade-3: var(--color-dark-shade-3);
     --color-shade-4: var(--color-dark-shade-4);
+    --color-text-1: var(--color-dark-text-1);
+    --color-text-2: var(--color-dark-text-2);
+    --color-text-3: var(--color-dark-text-3);
+    --color-text-4: var(--color-dark-text-4);
     --color-primary: var(--color-dark-primary);
     --color-secondary: var(--color-dark-secondary);
     --color-error: var(--color-dark-error);
@@ -470,10 +494,11 @@ pre {
   display: block;
   padding: 1rem;
   border-radius: 1rem;
-  background-color: var(--color-shade-1);
+  border: solid 0.3em var(--color-shade-2);
 }
 pre code {
   background-color: initial;
+  border: initial;
   border-radius: initial;
   padding: initial;
   font-size: inherit;
@@ -483,11 +508,50 @@ code,
 .code {
   font-family: "Departure Mono", ui-monospace, monospace;
   font-size: 0.8em;
-  background-color: var(--color-shade-2);
+  border: solid 0.15em var(--color-shade-2);
   border-radius: 0.2em;
   padding: 0 0.2em;
 }
 
+pre span.comment,
+code span.comment,
+.code span.comment {
+  color: var(--color-text-4);
+  font-style: italic;
+}
+pre span.neutral,
+code span.neutral,
+.code span.neutral {
+  color: var(--color-text-2);
+}
+pre span.identifier,
+code span.identifier,
+.code span.identifier {
+  color: var(--color-primary);
+}
+pre span.function,
+code span.function,
+.code span.function {
+  color: var(--color-accent-1);
+  font-style: italic;
+}
+pre span.keyword,
+code span.keyword,
+.code span.keyword {
+  color: var(--color-accent-2);
+}
+pre span.number,
+code span.number,
+.code span.number {
+  color: var(--color-accent-3);
+}
+pre span.string,
+code span.string,
+.code span.string {
+  color: var(--color-accent-3);
+  font-style: italic;
+}
+
 table {
   width: fit-content;
   border-collapse: collapse;
@@ -552,9 +616,6 @@ figure img {
   object-fit: contain;
   object-position: center;
 }
-figure img.glitch {
-  filter: url("glitch.svg#glitch");
-}
 
 img {
   width: 80%;
@@ -563,8 +624,5 @@ img {
   object-position: center;
   margin: 0 auto;
 }
-img.glitch {
-  filter: url("glitch.svg#glitch");
-}
 
 /*# sourceMappingURL=base.css.map */

styleguide/assets/style/base.scss

@@ -544,10 +544,6 @@ figure {
     max-height: 30vh;
     object-fit: contain;
     object-position: center;
-
-    &.glitch {
-      filter: url("glitch.svg#glitch");
-    }
   }
 }
 
@@ -557,8 +553,4 @@ img {
   object-fit: contain;
   object-position: center;
   margin: 0 auto;
-
-  &.glitch {
-    filter: url("glitch.svg#glitch");
-  }
 }

styleguide/assets/style/merch.ccss.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCE;AACF,WAAY;EACV,WAAW,EAAE,GAAG;EAChB,WAAW,EAAE,SAAS;EACtB,OAAO,EAAE,yTAAyT",
+"sources": ["merch.scss"],
+"names": [],
+"file": "merch.ccss"
+}

styleguide/assets/style/merch.css

@@ -122,6 +122,10 @@
   --color-shade-2: var(--color-dark-shade-2);
   --color-shade-3: var(--color-dark-shade-3);
   --color-shade-4: var(--color-dark-shade-4);
+  --color-text-1: var(--color-dark-text-1);
+  --color-text-2: var(--color-dark-text-2);
+  --color-text-3: var(--color-dark-text-3);
+  --color-text-4: var(--color-dark-text-4);
   --color-primary: var(--color-dark-primary);
   --color-secondary: var(--color-dark-secondary);
   --color-error: var(--color-dark-error);
@@ -160,6 +164,10 @@
   --color-shade-2: var(--color-light-shade-2);
   --color-shade-3: var(--color-light-shade-3);
   --color-shade-4: var(--color-light-shade-4);
+  --color-text-1: var(--color-light-text-1);
+  --color-text-2: var(--color-light-text-2);
+  --color-text-3: var(--color-light-text-3);
+  --color-text-4: var(--color-light-text-4);
   --color-primary: var(--color-light-primary);
   --color-secondary: var(--color-light-secondary);
   --color-error: var(--color-light-error);
@@ -191,6 +199,10 @@
     --color-shade-2: var(--color-dark-shade-2);
     --color-shade-3: var(--color-dark-shade-3);
     --color-shade-4: var(--color-dark-shade-4);
+    --color-text-1: var(--color-dark-text-1);
+    --color-text-2: var(--color-dark-text-2);
+    --color-text-3: var(--color-dark-text-3);
+    --color-text-4: var(--color-dark-text-4);
     --color-primary: var(--color-dark-primary);
     --color-secondary: var(--color-dark-secondary);
     --color-error: var(--color-dark-error);
@@ -228,6 +240,10 @@
     --color-shade-2: var(--color-light-shade-2);
     --color-shade-3: var(--color-light-shade-3);
     --color-shade-4: var(--color-light-shade-4);
+    --color-text-1: var(--color-light-text-1);
+    --color-text-2: var(--color-light-text-2);
+    --color-text-3: var(--color-light-text-3);
+    --color-text-4: var(--color-light-text-4);
     --color-primary: var(--color-light-primary);
     --color-secondary: var(--color-light-secondary);
     --color-error: var(--color-light-error);
@@ -263,6 +279,10 @@
     --color-shade-2: var(--color-light-shade-2);
     --color-shade-3: var(--color-light-shade-3);
     --color-shade-4: var(--color-light-shade-4);
+    --color-text-1: var(--color-light-text-1);
+    --color-text-2: var(--color-light-text-2);
+    --color-text-3: var(--color-light-text-3);
+    --color-text-4: var(--color-light-text-4);
     --color-primary: var(--color-light-primary);
     --color-secondary: var(--color-light-secondary);
     --color-error: var(--color-light-error);
@@ -292,6 +312,10 @@
     --color-shade-2: var(--color-dark-shade-2);
     --color-shade-3: var(--color-dark-shade-3);
     --color-shade-4: var(--color-dark-shade-4);
+    --color-text-1: var(--color-dark-text-1);
+    --color-text-2: var(--color-dark-text-2);
+    --color-text-3: var(--color-dark-text-3);
+    --color-text-4: var(--color-dark-text-4);
     --color-primary: var(--color-dark-primary);
     --color-secondary: var(--color-dark-secondary);
     --color-error: var(--color-dark-error);
@@ -470,10 +494,11 @@ pre {
   display: block;
   padding: 1rem;
   border-radius: 1rem;
-  background-color: var(--color-shade-1);
+  border: solid 0.3em var(--color-shade-2);
 }
 pre code {
   background-color: initial;
+  border: initial;
   border-radius: initial;
   padding: initial;
   font-size: inherit;
@@ -483,11 +508,50 @@ code,
 .code {
   font-family: "Departure Mono", ui-monospace, monospace;
   font-size: 0.8em;
-  background-color: var(--color-shade-2);
+  border: solid 0.15em var(--color-shade-2);
   border-radius: 0.2em;
   padding: 0 0.2em;
 }
 
+pre span.comment,
+code span.comment,
+.code span.comment {
+  color: var(--color-text-4);
+  font-style: italic;
+}
+pre span.neutral,
+code span.neutral,
+.code span.neutral {
+  color: var(--color-text-2);
+}
+pre span.identifier,
+code span.identifier,
+.code span.identifier {
+  color: var(--color-primary);
+}
+pre span.function,
+code span.function,
+.code span.function {
+  color: var(--color-accent-1);
+  font-style: italic;
+}
+pre span.keyword,
+code span.keyword,
+.code span.keyword {
+  color: var(--color-accent-2);
+}
+pre span.number,
+code span.number,
+.code span.number {
+  color: var(--color-accent-3);
+}
+pre span.string,
+code span.string,
+.code span.string {
+  color: var(--color-accent-3);
+  font-style: italic;
+}
+
 table {
   width: fit-content;
   border-collapse: collapse;
@@ -552,9 +616,6 @@ figure img {
   object-fit: contain;
   object-position: center;
 }
-figure img.glitch {
-  filter: url("glitch.svg#glitch");
-}
 
 img {
   width: 80%;
@@ -563,9 +624,6 @@ img {
   object-position: center;
   margin: 0 auto;
 }
-img.glitch {
-  filter: url("glitch.svg#glitch");
-}
 
 i[data-icon] {
   display: inline-block;

styleguide/assets/style/styleguide.css

@@ -616,9 +616,6 @@ figure img {
   object-fit: contain;
   object-position: center;
 }
-figure img.glitch {
-  filter: url("glitch.svg#glitch");
-}
 
 img {
   width: 80%;
@@ -627,9 +624,6 @@ img {
   object-position: center;
   margin: 0 auto;
 }
-img.glitch {
-  filter: url("glitch.svg#glitch");
-}
 
 i[data-icon] {
   display: inline-block;

styleguide/demopage/index.html

@@ -220,32 +220,26 @@
           </p>
           <figure>
             <img
-              src="../assets/image/example_cat.jpg"
+              src="../assets/image/example_qrcode.png"
-              alt="Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind
+              alt="A version 2 qrcode containing the text 'Never gonna give you up!'"
-                      of leopard-print fabric and looking at something behind the camera. The background is dark and
-                      plain."
             />
             <figcaption>
               Example image without any distortion applied.
             </figcaption>
           </figure>
           <p>
-            Now, in HTML you could simply specify <code>class="glitch"</code> on
+            We wanted to add the ability to simply specify a CSS class on an
-            the image tag to add the SVG filter dynamically, but this won't
+            HTML image tag (or any other tag for that matter) to apply an SVG
-            render said filter in Apple's Safari, which has been a known issue
+            filter dynamically, but this won't render said filter in Apple's
-            for many years. So instead, we also made
+            Safari (and sometimes not even in Chromium-based browsers), which
+            has been a known issue for many years. So instead, we made
             <a href="../generator">a simple web-tool to apply the filter</a> to
-            an image and export it as a PNG. The tool also scales the image down
+            an image and export it as a PNG.
-            to ensure that the filter looks similar across all images.
           </p>
           <figure>
             <img
-              class="glitch"
+              src="../assets/image/example_qrcode_distorted.png"
-              src="../assets/image/example_cat.jpg"
+              alt="The same image as before, except with a glitchy filer applied. The first effect applies to bright edges, which get paintet pink and blue to their left and right hand side respectively. The second effect distorts the image by offsetting parts of the image horizontally by seemingly random yet somewhat osscilating amounts."
-              alt="The same photograph as before, except with a glitchy filer applied. The first effect applies to
-                      bright edges, which get surrounded by pink and blue to their left and right hand side. The second
-                      one distorts the image by offsetting parts of the image horizontally by seemingly random yet
-                      somewhat osscilating amounts."
             />
             <figcaption>Example image with visual glitches applied.</figcaption>
           </figure>

styleguide/generator/index.html

@@ -124,8 +124,44 @@
                 filterUnits="objectBoundingBox"
                 primitiveUnits="objectBoundingBox"
               >
-                <feColorMatrix
+                <feFlood x="0" width="0.001" result="floodLeftColumn" />
+                <feComposite
                   in="SourceGraphic"
+                  in2="floodLeftColumn"
+                  operator="in"
+                  result="sourceLeftColumn"
+                />
+                <feMorphology
+                  x="-0.5"
+                  in="sourceLeftColumn"
+                  operator="dilate"
+                  radius="0.5 0.000001"
+                  result="sourceLeftColumnWide"
+                />
+
+                <feFlood x="0.999" width="0.001" result="floodRightColumn" />
+                <feComposite
+                  in="SourceGraphic"
+                  in2="floodRightColumn"
+                  operator="in"
+                  result="sourceRightColumn"
+                />
+                <feMorphology
+                  x="0.5"
+                  in="sourceRightColumn"
+                  operator="dilate"
+                  radius="0.5 0.000001"
+                  result="sourceRightColumnWide"
+                />
+
+                <feMerge result="expandedSource">
+                  <feMergeNode in="sourceLeftColumnWide" />
+                  <feMergeNode in="sourceRightColumnWide" />
+                  <feMergeNode in="SourceGraphic" />
+                </feMerge>
+
+                <feColorMatrix
+                  in="expandedSource"
                   type="saturate"
                   values="0"
                   result="bw"
@@ -138,46 +174,63 @@
                 <feConvolveMatrix
                   in="ltoa_inverse"
                   result="pink_edges"
-                  kernelMatrix="-4 0 4 0 0 0 -4 0 4"
+                  kernelMatrix="0 0 0 -8 0 8 0 0 0"
                 />
                 <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" />
+                <feOffset in="pink" result="pink_shift0" dx="-0.0015" />
+                <feOffset in="pink" result="pink_shift1" dx="-0.0030" />
+                <feOffset in="pink" result="pink_shift2" dx="-0.0045" />
 
                 <feConvolveMatrix
                   in="ltoa_inverse"
                   result="cyan_edges"
-                  kernelMatrix="4 0 -4 0 0 0 4 0 -4"
+                  kernelMatrix="0 0 0 4 0 -4 0 0 0"
                 />
                 <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" />
+                <feOffset in="cyan" result="cyan_shift0" dx="0.0015" />
+                <feOffset in="cyan" result="cyan_shift1" dx="0.0030" />
+                <feOffset in="cyan" result="cyan_shift2" dx="0.0045" />
 
                 <feMerge result="pink_cyan_shift">
-                  <feMergeNode in="SourceGraphic" />
+                  <feMergeNode in="expandedSource" />
-                  <feMergeNode in="pink_shift" />
+                  <feMergeNode in="pink_shift0" />
-                  <feMergeNode in="cyan_shift" />
+                  <feMergeNode in="pink_shift1" />
+                  <feMergeNode in="cyan_shift0" />
+                  <feMergeNode in="cyan_shift1" />
                 </feMerge>
 
                 <feTurbulence
                   type="fractalNoise"
-                  baseFrequency="0 0.2"
+                  baseFrequency="0 0.05"
-                  numOctaves="1"
+                  numOctaves="2"
                   result="noise"
                 />
                 <feDisplacementMap
                   in="pink_cyan_shift"
                   in2="noise"
                   result="distorted_raw"
-                  scale="0.02"
+                  scale="0.04"
                 />
-                <feOffset in="distorted_raw" result="distorted" />
+
+                <feComponentTransfer
+                  in="distorted_raw"
+                  result="SourceDistorted"
+                >
+                  <feFuncA type="linear" slope="0.9" />
+                </feComponentTransfer>
+
+                <feMerge>
+                  <feMergeNode in="expandedSource" />
+                  <feMergeNode in="distorted_raw" />
+                </feMerge>
               </filter>
 
               <g filter="url(#filter0)">