From 8637b8ce7508e555d311d84f79ca1d8bfc977217 Mon Sep 17 00:00:00 2001
From: Peter Amende <hey@peteramende.de>
Date: Fri, 20 Feb 2026 09:27:43 +0100
Subject: [PATCH] change animated svg blending mode

---
 _sass/_layout.scss | 14 +++++++++++---
 index.md           | 17 ++---------------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index e902de5..c1cabfe 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -489,14 +489,22 @@ body {
       top: 0;
       width: 100%;
       height: 100%;
+      border-radius: var(--radius-box);
       object-fit: cover;
+      color: var(--color-background-main);
       mix-blend-mode: plus-lighter;
       opacity: 0.5;
-      border-radius: var(--radius-box);
 
       @media (prefers-color-scheme: dark) {
-        mix-blend-mode: plus-darker;
-        filter: invert(100%);
+        mix-blend-mode: color-burn;
+      }
+
+      svg {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
       }
     }
 
diff --git a/index.md b/index.md
index 53912f4..bcfcf51 100644
--- a/index.md
+++ b/index.md
@@ -95,21 +95,8 @@ pathName: rootPath
         <div class="support-box--value">
           <p>Our monthly server costs range from <strong>20</strong> to <strong>60 Euro</strong>, depending on traffic.</p>
         </div>
-        <div class="support-box--background particle-stream" aria-hidden="true">
+        <div class="support-box--background" aria-hidden="true">
           <style>
-            .particle-stream {
-              position: absolute;
-              width: 100%;
-              height: 100%;
-              overflow: hidden;
-            }
-            .particle-stream svg {
-              width: 100%;
-              height: 100%;
-              position: absolute;
-              inset: 0;
-              pointer-events: none;
-            }
             @keyframes movePath {
               0% {
                 offset-distance: 0%;
@@ -147,7 +134,7 @@ pathName: rootPath
                 rect.setAttribute('class', 'particle');
                 rect.setAttribute('width', size);
                 rect.setAttribute('height', size);
-                rect.setAttribute('fill', 'white');
+                rect.setAttribute('fill', 'currentColor');
                 rect.setAttribute('rx', 2);
                 rect.style.setProperty('--p-opacity', opacity);
                 rect.style.animationDuration = duration + 's';