отрисовала в коде иконку + анимация появления на стартовой странице / в работе

src/pages/Anim.tsx

@@ -0,0 +1,133 @@
+"use client"
+import { useEffect, useState } from "react"
+import { useHistory } from "react-router-dom"
+
+export default function Welcome() {
+  const history = useHistory()
+  const [animationPhase, setAnimationPhase] = useState(0)
+
+  useEffect(() => {
+    const timer1 = setTimeout(() => setAnimationPhase(1), 500)
+    const timer2 = setTimeout(() => setAnimationPhase(2), 1500)
+    const timer3 = setTimeout(() => setAnimationPhase(3), 2500)
+    // const timer4 = setTimeout(() => history.push("/login"), 4000) // Раскомментируйте при необходимости
+
+    return () => {
+      clearTimeout(timer1)
+      clearTimeout(timer2)
+      clearTimeout(timer3)
+      // clearTimeout(timer4)
+    }
+  }, [history])
+
+  return (
+    <div className="min-h-screen relative overflow-hidden">
+      {/* Фон и частицы */}
+      <div className="absolute inset-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C]">
+        {/* floating particles */}
+        <div className="absolute inset-0">
+          <div className="absolute top-20 left-10 w-32 h-32 bg-white/5 rounded-full animate-pulse blur-xl"></div>
+          <div className="absolute bottom-32 right-16 w-24 h-24 bg-white/10 rounded-full animate-bounce blur-lg"></div>
+          <div className="absolute top-1/2 left-1/4 w-16 h-16 bg-white/5 rounded-full animate-ping blur-md"></div>
+          <div className="absolute top-1/3 right-1/3 w-20 h-20 bg-white/5 rounded-full animate-pulse blur-lg"></div>
+        </div>
+
+        {/* Основной контент */}
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="text-center z-10 px-8">
+            {/* Заголовки и загрузка */}
+            {/* ... ваш существующий код ... */}
+            {/* SVG с анимацией конечностей */}
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 64 64"
+              className="h-[30rem] lg:h-[50rem] w-auto z-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            >
+              {/* Группа с зеркальным отражением всего, кроме рук */}
+              <g transform="translate(64, 0) scale(-1, 1)">
+                {/* Голова */}
+                <circle cx={32} cy={12} r={6} fill="#000" />
+
+                {/* Тело */}
+                <rect x={24} y={20} width={16} height={24} fill="#000" rx={2} />
+
+                {/* Левая рука (смотрит вниз) */}
+                <path
+                  d="M34,26 Q51,16 40,3"
+                  fill="none"
+                  stroke="#000"
+                  strokeWidth={6}
+                  strokeLinecap="round"
+                  className={`limb`}
+                  style={{ '--length': '70' }}
+                />
+
+                {/* Правая рука (волнообразная вверх) */}
+                <path
+                  d="M26,23 Q16,34 18,32"
+                  fill="none"
+                  stroke="#000"
+                  strokeWidth={6}
+                  strokeLinecap="round"
+                  className={`limb`}
+                  style={{ '--length': '60' }}
+                />
+
+                {/* Левая нога - длиннее */}
+                <rect
+                  x={24}
+                  y={40}
+                  width={6}
+                  height={20}
+                  rx={3}
+                  className={`limb`}
+                  style={{ '--length': '60' }}
+                />
+
+                {/* Правая нога - длиннее */}
+                <rect
+                  x={34}
+                  y={40}
+                  width={6}
+                  height={13}
+                  rx={3}
+                  className={`limb`}
+                  style={{ '--length': '50' }}
+                />
+              </g>
+              {/* Внутри SVG добавим стили для анимации линий */}
+              <style>
+                {`
+                .limb {
+                  stroke-dasharray: var(--length);
+                  stroke-dashoffset: var(--length);
+                  opacity: 0;
+                  animation: growLine 2s forwards;
+                  /* Все начинают одновременно */
+                }
+                /* Можно оставить задержки равными нулю или убрать их */
+                `}
+              </style>
+              {/* Анимация для всех элементов одновременно */}
+              <defs>
+                <style>
+                  {`
+                    @keyframes growLine {
+                      to {
+                        stroke-dashoffset: 0;
+                        opacity: 1;
+                      }
+                    }
+                    .limb {
+                      animation-delay: 0s; /* все начинают сразу */
+                    }
+                  `}
+                </style>
+              </defs>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}