new version

src/routes/+page.svelte

@@ -17,6 +17,7 @@
   let error: string = "";
   let isDragging: boolean = false;
   let isModalOpen: boolean = false;
+  let fontSize: number = 2.5;
 
   async function validateAndLoadImage(file: File): Promise<void> {
     error = "";
@@ -166,7 +167,7 @@
         <!-- Загруженное изображение -->
         {#if image}
           <div id="result" class="w-full h-full">
-            <svg viewBox="0 0 512 512" class="w-full h-full">
+            <svg viewBox="0 0 512 512" class="w-full h-full" style="--font-size: {fontSize}rem">
               <defs>
                 <clipPath id="circle-clip">
                   <circle cx="256" cy="256" r="256" />
@@ -177,7 +178,7 @@
             {#if text}
                 <path
                   id="text-path"
-                  d="M 26,256 a 230,230 0 1,0 460,0 a 230,230 0 1,1 -460,0"
+                  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%">
@@ -186,10 +187,11 @@
                 </linearGradient>
     
                 <text class="circle-text-bg">
-                  <textPath href="#text-path" startOffset="25%" text-anchor="middle">{text}</textPath>
+                  <textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
                 </text>
+
                 <text class="circle-text">
-                  <textPath href="#text-path" startOffset="25%" text-anchor="middle">{text}</textPath>
+                  <textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
                 </text>
             {/if}
             </svg>
@@ -225,6 +227,21 @@
         </button>
       </div>
 
+      <div class="flex items-center gap-3 mb-4">
+        <label for="font-size-slider" class="text-sm text-gray-600 whitespace-nowrap"
+          >Размер текста:</label
+        >
+        <input
+          id="font-size-slider"
+          type="range"
+          min="1.5"
+          max="7"
+          step="0.1"
+          bind:value={fontSize}
+          class="w-full"
+        />
+      </div>
+
       <p class="text-sm text-gray-500 text-center">
         Размер изображения 512×512 пикселей
       </p>
@@ -240,9 +257,9 @@
     stroke-linejoin:round;
     stroke-linecap:round;
     paint-order: stroke;
-    font-size: 2.5rem;
+    font-size: var(--font-size);
     font-weight: 700;
-    letter-spacing: 3px;
+    letter-spacing: 6px;
   }
 
   .circle-text {
@@ -250,8 +267,9 @@
     stroke: #000;
     stroke-width: 1.5px;
     paint-order: stroke;
-    letter-spacing: 3px;
-    font-size: 2.5rem;
+    letter-spacing: 6px;
+    font-size: var(--font-size);
     font-weight: 700;
   }
+
 </style>