IT WORKS SOMEWHAT

Author: ReKylee

src/lib/components/features/SkillsSection.svelte

@@ -5,6 +5,7 @@
     import SkillIcon from "$lib/components/ui/SkillIcon.svelte";
     import BlinkingCursor from "$lib/components/ui/BlinkingCursor.svelte";
     import DecoBG from "$lib/components/ui/DecoBG/DecoBG.svelte";
+    import ControllerSvgDefs from "../ui/DecoBG/ControllerSvgDefs.svelte";
 </script>
 
 <Section id="skills" title={$t("skills.title")}>
@@ -16,6 +17,9 @@
     <div class="mt-12 grid grid-cols-1 gap-10 md:grid-cols-3">
         <SkillCard title={$t("skills.engines")} theme="mauve">
             <DecoBG>
+                <svelte:fragment slot="defs">
+                    <ControllerSvgDefs />
+                </svelte:fragment>
                 <div
                     class="flex flex-wrap items-center justify-center gap-4 p-4"
                 >

src/lib/components/ui/DecoBG/ControllerSvgDefs.svelte

@@ -1,52 +1,32 @@
 <script lang="ts">
     import DreamcastController from "$lib/icons/ryan-beck-dreamcast-controller.svg?component";
     import GamecubeController from "$lib/icons/ryan-beck-gamecube-controller.svg?component";
-    import NintendoController from "$lib/icons/ryan-beck-nintendo-controller.svg?component";
+    import WiiController from "$lib/icons/ryan-beck-wii-controller.svg?component";
+    import NesController from "$lib/icons/ryan-beck-nes-controller.svg?component";
+    import NSFController from "$lib/icons/ryan-beck-n64-controller.svg?component";
 </script>
 
-<svg width="0" height="0" style="position:absolute; overflow:hidden;">
-    <defs>
-        <symbol id="icon-dreamcast" viewBox="0 0 24 24">
-            <DreamcastController />
-        </symbol>
-        <symbol id="icon-gamecube" viewBox="0 0 24 24">
-            <GamecubeController />
-        </symbol>
-        <symbol id="icon-nintendo" viewBox="0 0 100 100">
-            <NintendoController />
-        </symbol>
+<defs>
+    <symbol id="icon-dreamcast" viewBox="0 0 24 24"
+        ><DreamcastController /></symbol
+    >
+    <symbol id="icon-gamecube" viewBox="0 0 24 24"
+        ><GamecubeController /></symbol
+    >
+    <symbol id="icon-wii" viewBox="0 0 100 100"><WiiController /></symbol>
+    <symbol id="icon-nes" viewBox="0 0 100 100"><NesController /></symbol>
+    <symbol id="icon-n64" viewBox="0 0 100 100"><NSFController /></symbol>
 
-        <pattern
-            id="controller-pattern"
-            patternUnits="userSpaceOnUse"
-            width="250"
-            height="250"
-            color="var(--pattern-color, currentColor)"
-        >
-            <use
-                href="#icon-dreamcast"
-                x="25"
-                y="50"
-                width="75"
-                height="75"
-                fill="currentColor"
-            />
-            <use
-                href="#icon-gamecube"
-                x="125"
-                y="125"
-                width="75"
-                height="75"
-                fill="currentColor"
-            />
-            <use
-                href="#icon-nintendo"
-                x="75"
-                y="200"
-                width="75"
-                height="75"
-                fill="currentColor"
-            />
-        </pattern>
-    </defs>
-</svg>
+    <pattern
+        id="controller-pattern"
+        patternUnits="userSpaceOnUse"
+        width="250"
+        height="250"
+    >
+        <use href="#icon-dreamcast" x="25" y="50" width="75" height="75" />
+        <use href="#icon-gamecube" x="125" y="125" width="75" height="75" />
+        <use href="#icon-wii" x="81" y="224" width="75" height="75" />
+        <use href="#icon-nes" x="84" y="214" width="75" height="75" />
+        <use href="#icon-n64" x="86" y="208" width="75" height="75" />
+    </pattern>
+</defs>

src/lib/components/ui/DecoBG/DecoBG.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
     /** Controls the overall opacity of the pattern. */
-    export let density: number = 0.1;
+    export let density: number = 1;
 </script>
 
 <div
     class="absolute inset-0 z-0 text-ctp-surface1 dark:text-ctp-surface2"
-    style="opacity: {density}; --pattern-color: currentColor;"
+    style="opacity: {density};"
     aria-hidden="true"
 >
     <svg width="100%" height="100%">
+        <slot name="defs"></slot>
+        <!-- might need class="fill-current" -->
         <rect width="100%" height="100%" fill="url(#controller-pattern)" />
     </svg>
 </div>