diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
new file mode 100644
index 0000000..377f218
--- /dev/null
+++ b/src/routes/test/+page.svelte
@@ -0,0 +1,276 @@
+<script lang="ts">
+  import domtoimage from "dom-to-image";
+  import Cropper, { type OnCropCompleteEvent } from "svelte-easy-crop";
+
+  let crop = { x: 0, y: 0 };
+  let zoom = 1;
+  let cropSize = { width: 512, height: 512 };
+  let maxZoom = 10;
+  let minZoom = 1;
+  let restrictPosition = true;
+  let showGrid = false;
+  let croppedImage = null;
+
+  let image: string;
+  let incorrectImage: string;
+  let text: string = "";
+  let error: string = "";
+  let isDragging: boolean = false;
+  let isModalOpen: boolean = false;
+  let fontSize: number = 2.5;
+
+  async function validateAndLoadImage(file: File): Promise<void> {
+    error = "";
+    const img = new Image();
+    const reader = new FileReader();
+
+    reader.onload = (e: ProgressEvent<FileReader>) => {
+      img.src = e.target?.result as string;
+      img.onload = () => {
+        if (img.width === 512 && img.height === 512) {
+          image = e.target?.result as string;
+        } else {
+          incorrectImage = e.target?.result as string;
+          isModalOpen = true;
+        }
+      };
+    };
+    reader.readAsDataURL(file);
+  }
+
+  function handleDrop(e: DragEvent): void {
+    e.preventDefault();
+    isDragging = false;
+    const file = (e.dataTransfer as DataTransfer).files[0];
+    if (file && file.type.startsWith("image/")) {
+      validateAndLoadImage(file);
+    }
+  }
+
+  function handleDragOver(e: DragEvent): void {
+    e.preventDefault();
+    isDragging = true;
+  }
+
+  function handleDragLeave(): void {
+    isDragging = false;
+  }
+
+  async function saveImage(): Promise<void> {
+    if (!image) return;
+
+    let node = document.getElementById("result");
+
+    if (node) {
+      domtoimage
+        .toPng(node, {
+          style: {
+            border: "none",
+            padding: "0",
+            margin: "0",
+            outline: "none",
+          },
+        })
+        .then((dataUrl: string) => {
+          var link = document.createElement("a");
+          link.download = "avatar.png";
+          link.href = dataUrl;
+          link.click();
+        });
+    }
+  }
+
+  function cropImage(x: number, y: number, width: number, height: number) {
+    const img = new Image();
+    img.src = incorrectImage;
+
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      canvas.width = 512;
+      canvas.height = 512;
+
+      ctx.drawImage(img, x, y, width, height, 0, 0, 512, 512);
+
+      croppedImage = canvas.toDataURL("image/png");
+    };
+  }
+
+  const handleCropComplete = (event: OnCropCompleteEvent) => {
+    const { x, y, width, height } = event.pixels;
+    cropImage(x, y, width, height);
+  };
+
+  function saveToMainImage() {
+    image = croppedImage;
+    isModalOpen = false;
+  }
+</script>
+
+<div>
+  {#if isModalOpen}
+    <div class="bg-white rounded-xl shadow-lg p-6">
+      <div class="flex flex-col">
+        <div class="h-[700px] w-[700px] relative rounded-2xl">
+          <Cropper
+            image={incorrectImage}
+            {cropSize}
+            {maxZoom}
+            {minZoom}
+            {restrictPosition}
+            {showGrid}
+            bind:crop
+            bind:zoom
+            oncropcomplete={handleCropComplete}
+          />
+        </div>
+
+        <button
+          onclick={saveToMainImage}
+          class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed mt-3"
+        >
+          Обрезать
+        </button>
+      </div>
+    </div>
+  {:else}
+    <div class="bg-white rounded-xl shadow-lg p-6">
+      <div
+        class="preview-container relative bg-gray-50 mb-4 overflow-hidden border-2 transition-colors h-[512px] w-[512px] rounded-full"
+        ondrop={handleDrop}
+        ondragover={handleDragOver}
+        ondragleave={handleDragLeave}
+        style="cursor: pointer"
+        onclick={() => document.getElementById("fileInput").click()}
+      >
+        <!-- Состояние без изображения -->
+        {#if !image}
+          <div
+            class="absolute inset-0 flex flex-col items-center justify-center cursor-pointer"
+          >
+            <svg
+              class="w-16 h-16 text-gray-400 mb-3"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-width="2"
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              ></path>
+            </svg>
+            <p class="text-lg text-gray-500">Перетащите изображение</p>
+            <p class="text-sm text-gray-400 mt-1">или кликните для выбора</p>
+          </div>
+        {/if}
+
+        <!-- Загруженное изображение -->
+        {#if image}
+          <div id="result" 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" />
+                </clipPath>
+
+                <pattern id="imagePattern" patternUnits="userSpaceOnUse" width="512" height="512" >
+                  <image href="/src/routes/test/image.png" width="512" height="512"/>
+                </pattern>
+              </defs>
+              <image href={image} width="512" height="512" clip-path="url(#circle-clip)" />
+              <!-- Текст -->
+            {#if text}
+                <path
+                  id="text-path"
+                  d="M 256,26 a 230,230 0 0,0 0,460 a 230,230 0 0,0 0,-460"
+                  fill="none"
+                />
+    
+                <text class="circle-text-bg">
+                  <textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
+                </text>
+
+                <text class="circle-text">
+                  <textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
+                </text>
+            {/if}
+            </svg>
+          </div>
+        {/if}
+
+        <input
+          id="fileInput"
+          type="file"
+          accept="image/*"
+          class="hidden"
+          onchange={(e) =>
+            validateAndLoadImage((e.target as HTMLInputElement).files[0])}
+        />
+      </div>
+
+      {#if error}
+        <p class="text-red-500 text-sm mb-4 text-center">{error}</p>
+      {/if}
+
+      <div class="flex flex-col sm:flex-row gap-3 mb-4">
+        <input
+          type="text"
+          bind:value={text}
+          placeholder="Должность"
+          class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <button
+          onclick={saveImage}
+          class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Сохранить 512×512
+        </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 class="min-w-[25px] min-h-[25px]">{fontSize}</div>
+      </div>
+
+      <p class="text-sm text-gray-500 text-center">
+        Размер изображения 512×512 пикселей
+      </p>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .circle-text-bg {
+    fill: none;
+    stroke: rgb(0, 0, 0, 0.7);
+    stroke-width: 5px;
+    stroke-linejoin:round;
+    stroke-linecap:round;
+    paint-order: stroke;
+    font-size: var(--font-size);
+    font-weight: 700;
+    letter-spacing: 6px;
+  }
+
+  .circle-text {
+    fill: url(#imagePattern);
+    stroke: #000;
+    stroke-width: 1.5px;
+    paint-order: stroke;
+    letter-spacing: 6px;
+    font-size: var(--font-size);
+    font-weight: 700;
+  }
+
+</style>
diff --git a/src/routes/test/image.png b/src/routes/test/image.png
new file mode 100644
index 0000000..bfcd373
Binary files /dev/null and b/src/routes/test/image.png differ
diff --git a/src/routes/test2/+page.svelte b/src/routes/test2/+page.svelte
new file mode 100644
index 0000000..f9621e6
--- /dev/null
+++ b/src/routes/test2/+page.svelte
@@ -0,0 +1,30 @@
+<script lang="ts"> 
+    var text: String = $state()
+</script>
+
+<svg width="400" height="200">
+  <defs>
+    <pattern id="imagePattern" patternUnits="userSpaceOnUse" width="100" height="100" >
+      <image href="/src/routes/test/image.png" width="100" height="100"/>
+    </pattern>
+    
+    <!-- Определяем путь для текста -->
+    <path id="textPath" d="M 256,26 a 230,230 0 0,0 0,460 a 230,230 0 0,0 0,-460" fill="none"/>
+  </defs>
+  
+  <!-- Отображаем путь (опционально, для визуализации) -->
+  <path d="M50,100 Q150,50 250,100 T450,100" 
+        fill="none" 
+        stroke="lightgray" 
+        stroke-width="1"
+        stroke-dasharray="5,5"/>
+  
+  <!-- Текст по пути -->
+  <text font-family="Arial" font-size="16" fill="url(#imagePattern)">
+    <textPath href="#textPath" startOffset="0%">
+      {text}
+    </textPath>
+  </text>
+</svg>
+
+<input type="text" bind:value={text}>
\ No newline at end of file