Inline global gradient

We only use it in one place anyway. And components should be
self-contained, so they're easier to reason about.

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

src/App.svelte

@@ -13,7 +13,6 @@
   import Header from "@app/Header.svelte";
   import Loading from "@app/Loading.svelte";
   import Modal from "@app/Modal.svelte";
-  import LinearGradient from "@app/LinearGradient.svelte";
   import ColorPalette from "./ColorPalette.svelte";
 
   const loadConfig = getConfig().then(async cfg => {
@@ -113,6 +112,4 @@
       </Modal>
     </div>
   {/await}
-  <!-- Adds a svg linear gradient that can be used by any other svg under the id #gradient -->
-  <LinearGradient id="gradient" />
 </div>

src/Diagram.svelte

@@ -100,6 +100,15 @@
       </linearGradient>
     </defs>
   </svg>
+  <svg style="height: 0; width: 0;" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0">
+        <stop offset="0%" stop-color="#ff55ff" stop-opacity="0.2" />
+        <stop offset="50%" stop-color="#ff55ff" stop-opacity="0.8" />
+        <stop offset="100%" stop-color="#ff55ff" stop-opacity="1" />
+      </linearGradient>
+    </defs>
+  </svg>
   {#if points.length > 0}
     <g>
       <path

src/LinearGradient.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  export let id: string;
-  export let fillColor = "#ff55ff";
-</script>
-
-<svg style="height: 0; width: 0;" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient {id} x1="0" y1="1" x2="0" y2="0">
-      <stop offset="0%" stop-color={fillColor} stop-opacity="0.2" />
-      <stop offset="50%" stop-color={fillColor} stop-opacity="0.8" />
-      <stop offset="100%" stop-color={fillColor} stop-opacity="1" />
-    </linearGradient>
-  </defs>
-</svg>