From 599fca85e4ed5a527b381f2f841f393a34ad3fed Mon Sep 17 00:00:00 2001
From: Hyomin Koo <hyomin@hyperithm.com>
Date: Wed, 27 Nov 2024 11:20:56 +0900
Subject: [PATCH] design: animated logo with svg anim

---
 src/components/ui/AnimatedLogo.tsx  |   8 +-
 src/components/ui/animated_logo.css |  28 -------
 src/icons/Profile.tsx               | 120 ++++++++++++++++++++++++++++
 3 files changed, 126 insertions(+), 30 deletions(-)
 delete mode 100644 src/components/ui/animated_logo.css
 create mode 100644 src/icons/Profile.tsx

diff --git a/src/components/ui/AnimatedLogo.tsx b/src/components/ui/AnimatedLogo.tsx
index 740e195..70c34ae 100644
--- a/src/components/ui/AnimatedLogo.tsx
+++ b/src/components/ui/AnimatedLogo.tsx
@@ -1,7 +1,11 @@
 import type { JSX, Component } from "solid-js";
-import "./animated_logo.css";
+import { Profile } from "@icons/Profile";
 export const AnimatedLogo: Component<JSX.HTMLAttributes<HTMLDivElement>> = (
   props
 ) => {
-  return <div {...props} class={`animated-logo ${props.class ?? ''}`}></div>;
+  return (
+    <div {...props} class={`${props.class ?? ""}`} role="presentation">
+      <Profile />
+    </div>
+  );
 };
diff --git a/src/components/ui/animated_logo.css b/src/components/ui/animated_logo.css
deleted file mode 100644
index 26b5848..0000000
--- a/src/components/ui/animated_logo.css
+++ /dev/null
@@ -1,28 +0,0 @@
-@keyframes burning {
-    0% {
-        background-position: 0 0;
-    }
-
-    50% {
-        background-position: 170% 70%;
-    }
-
-    100% {
-        background-position: 0 0;
-    }
-}
-
-@tailwind components;
-
-@layer components {
-    .animated-logo {
-        background: linear-gradient(270deg, #ca5010, #d13438, #ff8c00, #ca5010) repeat;
-        background-size: 200% 200%;
-        mask-image: url("/images/profile.svg");
-        mask-repeat: no-repeat;
-        mask-size: cover;
-        animation: burning 5s ease infinite;
-    }
-}
-
-
diff --git a/src/icons/Profile.tsx b/src/icons/Profile.tsx
new file mode 100644
index 0000000..8eb980d
--- /dev/null
+++ b/src/icons/Profile.tsx
@@ -0,0 +1,120 @@
+import type { Component, JSX } from "solid-js";
+
+export const Profile: Component<JSX.SvgSVGAttributes<SVGSVGElement>> = (
+  props
+) => {
+  return (
+    <svg
+      id="profile"
+      width="512"
+      height="512"
+      viewBox="0 0 512 512"
+      fill="currentColor"
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <linearGradient id="bg" x1="0%" x2="100%" y1="0%" y2="0%">
+          <stop offset="0%" stop-color="#ca5010">
+            <animate
+              attributeName="offset"
+              values="0%;50%;0%"
+              dur="2s"
+              repeatCount="indefinite"
+            />
+          </stop>
+          <stop offset="25%" stop-color="#d13438">
+            <animate
+              attributeName="offset"
+              values="25%;75%;25%"
+              dur="4s"
+              repeatCount="indefinite"
+            />
+          </stop>
+          <stop offset="75%" stop-color="#ff8c00">
+            <animate
+              attributeName="offset"
+              values="75%;125%;75%"
+              dur="4s"
+              repeatCount="indefinite"
+            />
+          </stop>
+          <stop offset="100%" stop-color="#ca5010">
+            <animate
+              attributeName="offset"
+              values="100%;150%;100%"
+              dur="4s"
+              repeatCount="indefinite"
+            />{" "}
+          </stop>
+        </linearGradient>
+        <mask id="mask">
+          <rect
+            x="64.5289"
+            y="428.173"
+            width="490.415"
+            height="27.2453"
+            rx="13.6226"
+            transform="rotate(-45 64.5289 428.173)"
+          />
+          <rect
+            x="185.66"
+            y="254.063"
+            width="272.453"
+            height="27.2453"
+            rx="13.6226"
+            transform="rotate(-45 185.66 254.063)"
+          />
+          <rect
+            x="197.7"
+            y="189.043"
+            width="163.472"
+            height="27.2453"
+            rx="13.6226"
+            transform="rotate(-45 197.7 189.043)"
+          />
+          <rect
+            x="303.66"
+            y="295.002"
+            width="163.472"
+            height="27.2453"
+            rx="13.6226"
+            transform="rotate(-45 303.66 295.002)"
+          />
+          <rect
+            x="238.639"
+            y="307.043"
+            width="272.453"
+            height="27.2453"
+            rx="13.6226"
+            transform="rotate(-45 238.639 307.043)"
+          />
+          <rect
+            x="110.284"
+            y="435.398"
+            width="54.4905"
+            height="27.2453"
+            rx="13.6226"
+            transform="rotate(-45 110.284 435.398)"
+          />
+          <rect
+            x="57.3044"
+            y="382.418"
+            width="54.4905"
+            height="27.2453"
+            rx="13.6226"
+            transform="rotate(-45 57.3044 382.418)"
+          />
+        </mask>
+      </defs>
+      <rect
+        x="0"
+        y="0"
+        width="512"
+        height="512"
+        fill="url(#bg)"
+        mask="url(#mask)"
+      />
+    </svg>
+  );
+};