diff --git a/src/lib/components/atoms/Logo.svelte b/src/lib/components/atoms/Logo.svelte
index f287ede..bebbb9d 100644
--- a/src/lib/components/atoms/Logo.svelte
+++ b/src/lib/components/atoms/Logo.svelte
@@ -4,13 +4,12 @@
-
+
@@ -30,24 +28,12 @@
fill: var(--color--logo-fill);
stroke: var(--color--text);
}
- @keyframes logo-animation {
- 0% {
- transform: scale(0.8) rotate(0deg);
- opacity: 0;
- }
- 50% {
- transform: rotate(3deg);
- opacity: 0.3;
- }
- 100% {
- transform: scale(1) rotate(0deg);
- opacity: 1;
- }
- }
-
#logo-glow {
- animation: logo-animation 1.5s ease-in-out forwards;
- transition: filter 0.3s ease-in-out;
+ path {
+ --text-color: var(--color--text);
+ --logo-color: var(--color--logo-fill);
+ animation: svg-logo-stroke 3s;
+ }
&:hover {
filter: drop-shadow(0px 0px 3px var(--color--primary));
diff --git a/src/lib/scss/_animations.scss b/src/lib/scss/_animations.scss
index 828dfe2..201fba6 100644
--- a/src/lib/scss/_animations.scss
+++ b/src/lib/scss/_animations.scss
@@ -24,6 +24,43 @@
}
}
+
+@keyframes svg-logo-stroke {
+ 0% {
+ fill: transparent;
+ stroke: var(--text-color);
+ stroke-dashoffset: 25%;
+ stroke-dasharray: 0 50%;
+ stroke-width: 0;
+ }
+ 60% {
+ fill: transparent;
+ stroke: var(--text-color);
+ stroke-width: 4;
+ }
+ 70% {
+ fill: transparent;
+ stroke: var(--text-color);
+ stroke-width: 5;
+ }
+ 80% {
+ fill: transparent;
+ stroke: var(--text-color);
+ stroke-width: 6;
+ }
+ 90% {
+ stroke: var(--text-color);
+ stroke-width: 7;
+ }
+ 100% {
+ fill: var(--logo-color);
+ stroke: var(--text-color);
+ stroke-dashoffset: -25%;
+ stroke-dasharray: 50% 0;
+ stroke-width: 7;
+ }
+}
+
@keyframes spin {
from {
transform: rotate(0turn);