Got this fucker to work lmao

Author: ReKylee

src/lib/components/features/SkillsSection.svelte

@@ -1,11 +1,13 @@
 <script>
-    import { t } from "$lib/stores/language";
+    import BlinkingCursor from "$lib/components/ui/BlinkingCursor.svelte";
+    import DecoBG from "$lib/components/ui/DecoBG/DecoBG.svelte";
     import Section from "$lib/components/ui/Section.svelte";
     import SkillCard from "$lib/components/ui/SkillCard.svelte";
     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";
+    import DreamcastController from "$lib/icons/ryan-beck-dreamcast-controller.svg?component";
+    import GamecubeController from "$lib/icons/ryan-beck-gamecube-controller.svg?component";
+    import { t } from "$lib/stores/language";
+    const controllerIcons = [DreamcastController, GamecubeController];
 </script>
 
 <Section id="skills" title={$t("skills.title")}>
@@ -16,10 +18,13 @@
     </div>
     <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>
+            <DecoBG
+                icons={controllerIcons}
+                scale={40}
+                spacing={80}
+                rotation={-15}
+                color="text-ctp-subtext0"
+            >
                 <div
                     class="flex flex-wrap items-center justify-center gap-4 p-4"
                 >

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

@@ -1,19 +1,79 @@
 <script lang="ts">
-    /** Controls the overall opacity of the pattern. */
-    export let density: number = 1;
+    import type { Component } from "svelte";
+    import type { SVGAttributes } from "svelte/elements";
+
+    // --- PROPS ---
+    type SvgComponent = Component<SVGAttributes<SVGSVGElement>>;
+
+    // --- PROPS ---
+    /** An array of imported Svelte SVG components for the pattern. */
+    export let icons: SvgComponent[] = [];
+
+    /** The size of each icon in the pattern. */
+    export let scale: number = 50;
+
+    /** The gap between pattern tiles. A larger value means lower density. */
+    export let spacing: number = 100;
+
+    /** The Tailwind CSS class for the color of the icons. */
+    export let color: string = "red";
+
+    /** The rotation angle for each icon in degrees. */
+    export let rotation: number = -15;
+
+    // --- CALCULATIONS ---
+    // The full size of one pattern tile.
+    $: patternSize = scale + spacing;
+    // How many icons to fit horizontally in one tile before repeating.
+    $: iconsPerRow = 3;
 </script>
 
-<div
-    class="absolute inset-0 z-0 text-ctp-surface1 dark:text-ctp-surface2"
-    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>
+{#if icons.length > 0}
+    <div class="absolute inset-0 z-0" aria-hidden="true">
+        <svg width="100%" height="100%">
+            <defs>
+                {#each icons as icon, i}
+                    <symbol id="pattern-icon-{i}">
+                        <svelte:component this={icon} />
+                    </symbol>
+                {/each}
+
+                <pattern
+                    id="master-pattern"
+                    patternUnits="userSpaceOnUse"
+                    width={patternSize * iconsPerRow}
+                    height={patternSize}
+                >
+                    {#each icons as _icon, i}
+                        <use
+                            href="#pattern-icon-{i}"
+                            x={(i % iconsPerRow) * patternSize +
+                                patternSize / 2}
+                            y={Math.floor(i / iconsPerRow) * patternSize +
+                                patternSize / 2}
+                            width={scale}
+                            height={scale}
+                            transform="rotate({rotation}, {(i % iconsPerRow) *
+                                patternSize +
+                                patternSize / 2 +
+                                scale / 2}, {Math.floor(i / iconsPerRow) *
+                                patternSize +
+                                patternSize / 2 +
+                                scale / 2})"
+                        />
+                    {/each}
+                </pattern>
+            </defs>
+
+            <rect
+                width="100%"
+                height="100%"
+                fill="url(#master-pattern)"
+                {color}
+            />
+        </svg>
+    </div>
+{/if}
 
 <div class="relative z-10">
     <slot></slot>