del test directoiry

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import domtoimage from "dom-to-image";
   import Cropper, { type OnCropCompleteEvent } from "svelte-easy-crop";
+  import gradiImage from "$lib/images/image.png"
 
   let crop = { x: 0, y: 0 };
   let zoom = 1;
@@ -172,6 +173,10 @@
                 <clipPath id="circle-clip">
                   <circle cx="256" cy="256" r="256" />
                 </clipPath>
+
+                <pattern id="imagePattern" patternUnits="userSpaceOnUse" width="512" height="512" >
+                  <image href={gradiImage} width="512" height="512"/>
+                </pattern>
               </defs>
               <image href={image} width="512" height="512" clip-path="url(#circle-clip)" />
               <!-- Текст -->
@@ -181,10 +186,6 @@
                   d="M 256,26 a 230,230 0 0,0 0,460 a 230,230 0 0,0 0,-460"
                   fill="none"
                 />
-                <linearGradient id="text-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-                  <stop offset="0%" style="stop-color:rgb(124, 58, 237);stop-opacity:1" />
-                  <stop offset="100%" style="stop-color:rgb(37, 99, 235);stop-opacity:1" />
-                </linearGradient>
     
                 <text class="circle-text-bg">
                   <textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
@@ -264,7 +265,7 @@
   }
 
   .circle-text {
-    fill: url(#text-gradient);
+    fill: url(#imagePattern);
     stroke: #000;
     stroke-width: 1.5px;
     paint-order: stroke;