add new logo

src/ui/components/logo.tsx

@@ -5,6 +5,123 @@ export interface LogoProps {
   className?: string;
 }
 
+function AnimatedRLogo() {
+  return (
+    <svg
+      className="w-full h-full"
+      viewBox="11 9 18 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Animated R logo</title>
+      <defs>
+        <filter id="glitch1" x="-10%" y="-10%" width="120%" height="120%">
+          <feOffset in="SourceGraphic" dx="1.5" dy="-1" result="red">
+            <animate
+              attributeName="dx"
+              values="0;1.5;-1.5;0"
+              dur="3s"
+              repeatCount="indefinite"
+              keyTimes="0;0.3;0.6;1"
+              calcMode="discrete"
+            />
+            <animate
+              attributeName="dy"
+              values="0;-1;1;0"
+              dur="2.7s"
+              repeatCount="indefinite"
+              keyTimes="0;0.4;0.7;1"
+              calcMode="discrete"
+            />
+          </feOffset>
+          <feColorMatrix
+            in="red"
+            type="matrix"
+            values="1 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.7 0"
+            result="red-channel"
+          />
+        </filter>
+        <filter id="glitch2" x="-10%" y="-10%" width="120%" height="120%">
+          <feOffset in="SourceGraphic" dx="-1.5" dy="1" result="cyan">
+            <animate
+              attributeName="dx"
+              values="0;-1.5;1.5;0"
+              dur="3.5s"
+              repeatCount="indefinite"
+              keyTimes="0;0.2;0.5;1"
+              calcMode="discrete"
+            />
+            <animate
+              attributeName="dy"
+              values="0;1;-1;0"
+              dur="2.3s"
+              repeatCount="indefinite"
+              keyTimes="0;0.3;0.8;1"
+              calcMode="discrete"
+            />
+          </feOffset>
+          <feColorMatrix
+            in="cyan"
+            type="matrix"
+            values="0 0 0 0 0   0 1 0 0 0   0 0 1 0 0  0 0 0 0.7 0"
+            result="cyan-channel"
+          />
+        </filter>
+      </defs>
+
+      {/* Original white path */}
+      <path
+        d="M11 31V9H24.5V13.4H29V17.8H24.5V26.6H29V31H24.5V26.6H20V22.2H15.5V31H11ZM15.5 17.8H24.32V13.4H15.5V17.8Z"
+        fill="white"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0.8;1"
+          dur="2.5s"
+          repeatCount="indefinite"
+          keyTimes="0;0.1;1"
+          calcMode="discrete"
+        />
+      </path>
+
+      {/* Red channel (offset) */}
+      <g filter="url(#glitch1)">
+        <path
+          d="M11 31V9H24.5V13.4H29V17.8H24.5V26.6H29V31H24.5V26.6H20V22.2H15.5V31H11ZM15.5 17.8H24.32V13.4H15.5V17.8Z"
+          fill="#FF0000"
+          style={{ mixBlendMode: "screen" }}
+        >
+          <animate
+            attributeName="opacity"
+            values="0.7;0.5;0.7"
+            dur="3.2s"
+            repeatCount="indefinite"
+            keyTimes="0;0.2;1"
+            calcMode="discrete"
+          />
+        </path>
+      </g>
+
+      {/* Cyan channel (offset) */}
+      <g filter="url(#glitch2)">
+        <path
+          d="M11 31V9H24.5V13.4H29V17.8H24.5V26.6H29V31H24.5V26.6H20V22.2H15.5V31H11ZM15.5 17.8H24.32V13.4H15.5V17.8Z"
+          fill="#00FFFF"
+          style={{ mixBlendMode: "screen" }}
+        >
+          <animate
+            attributeName="opacity"
+            values="0.7;0.5;0.7"
+            dur="2.8s"
+            repeatCount="indefinite"
+            keyTimes="0;0.3;1"
+            calcMode="discrete"
+          />
+        </path>
+      </g>
+    </svg>
+  );
+}
 export function Logo({ className, ...props }: LogoProps) {
   const { onToggle } = useColorModeToggle();
 
@@ -14,31 +131,11 @@ export function Logo({ className, ...props }: LogoProps) {
       type="button"
       onClick={onToggle}
       className={cn(
-        "animate-rainbow p-2 relative lg:scale-[1.45] inline-flex",
+        "flex justify-center items-center p-2 size-20 lg:size-24",
         className,
       )}
     >
-      <svg
-        width="66"
-        height="68"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>colorful background</title>
-        <path d="M51.441 9.524c6.116 3.686 12.393 7.898 13.527 13.284 1.134 5.427-2.875 12.069-5.184 19.237-2.308 7.21-2.916 14.986-7.047 19.846-4.09 4.86-11.664 6.844-18.346 5.629-6.683-1.255-12.474-5.67-18.225-10.003C10.415 53.183 4.664 48.97 2.315 43.26c-2.309-5.67-1.256-12.797.567-20.087 1.863-7.25 4.495-14.661 9.72-18.63 5.224-3.97 13.04-4.577 19.926-3.24 6.885 1.296 12.838 4.495 18.913 8.221Z" />
-      </svg>
-      <span className="absolute top-1/2 right-1/2 transform translate-x-1/2 -translate-y-1/2 text-black opacity-40">
-        <svg
-          width="36"
-          height="36"
-          viewBox="0 0 32 32"
-          fill="currentColor"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>brand isotype</title>
-          <path d="M6 28V3H21V8H26V13H21V23H26V28H21V23H16V18H11V28H6ZM11 13H20.8V8H11V13Z" />
-        </svg>
-      </span>
+      <AnimatedRLogo />
     </button>
   );
 }