Skip to content

Commit c187066

Browse files
gallaylgallayl
committed
Logo improvements
1 parent 305f5aa commit c187066

File tree

1 file changed

+121
-31
lines changed

1 file changed

+121
-31
lines changed

‎src/components/icons/FuryStackLogo.astro‎

Lines changed: 121 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,52 +12,142 @@ const { size = 96 } = Astro.props;
1212
height={size}
1313
viewBox="0 0 512 512"
1414
aria-hidden="true"
15+
class="furystack-logo"
1516
>
1617
<title>FuryStack</title>
1718
<defs>
18-
<linearGradient id="fs-light" x1="0" y1="0" x2="1" y2="1">
19-
<stop offset="0%" stop-color="#dce6f2"></stop>
20-
<stop offset="100%" stop-color="#aabdd1"></stop>
19+
<linearGradient id="fs-silver" x1="0" y1="0" x2="1" y2="1">
20+
<stop offset="0%" stop-color="#ffffff"></stop>
21+
<stop offset="40%" stop-color="#f1f5f9"></stop>
22+
<stop offset="100%" stop-color="#cbd5e1"></stop>
2123
</linearGradient>
22-
<linearGradient id="fs-mid" x1="0" y1="0" x2="1" y2="1">
23-
<stop offset="0%" stop-color="#c4d4e4"></stop>
24-
<stop offset="100%" stop-color="#8ba3bc"></stop>
24+
25+
<linearGradient id="fs-blue" x1="0" y1="0" x2="1" y2="1">
26+
<stop offset="0%" stop-color="#60a5fa"></stop>
27+
<stop offset="100%" stop-color="#2563eb"></stop>
2528
</linearGradient>
29+
2630
<linearGradient id="fs-dark" x1="0" y1="0" x2="1" y2="1">
27-
<stop offset="0%" stop-color="#abc0d6"></stop>
28-
<stop offset="100%" stop-color="#7694b0"></stop>
31+
<stop offset="0%" stop-color="#475569"></stop>
32+
<stop offset="100%" stop-color="#1e293b"></stop>
2933
</linearGradient>
30-
<filter id="fs-shadow" x="-20%" y="-20%" width="140%" height="140%">
31-
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000" flood-opacity="0.15"
32-
></feDropShadow>
34+
35+
<filter id="fs-glow" x="-50%" y="-50%" width="200%" height="200%">
36+
<feGaussianBlur in="SourceAlpha" stdDeviation="12" result="blur"></feGaussianBlur>
37+
<feFlood flood-color="#3b82f6" flood-opacity="0.25" result="color"></feFlood>
38+
<feComposite in="color" in2="blur" operator="in" result="shadow"></feComposite>
39+
<feComposite in="SourceGraphic" in2="shadow" operator="over"></feComposite>
3340
</filter>
3441
</defs>
35-
<g
36-
stroke="#f0f6fc"
37-
stroke-width="3"
38-
stroke-linejoin="round"
39-
stroke-linecap="round"
40-
filter="url(#fs-shadow)"
41-
>
42+
43+
<g filter="url(#fs-glow)" stroke="none">
4244
<!-- Left Pillar -->
43-
<path d="M12 48 L90 126 V448 H12 Z" fill="url(#fs-light)"></path>
45+
<path d="M20 60 L100 140 V442 A6 6 0 0 1 94 448 H26 A6 6 0 0 1 20 442 Z" fill="url(#fs-silver)"
46+
></path>
4447

45-
<!-- Middle-Left Block -->
46-
<path d="M114 150 L192 228 V330 L114 252 Z" fill="url(#fs-mid)"></path>
48+
<!-- Bottom-Left Triangle (Aligned to Pillar) -->
49+
<path d="M120 448 H204 A6 6 0 0 0 210 442 V358 L120 448 Z" fill="url(#fs-silver)"></path>
4750

48-
<!-- Bottom-Left Triangle -->
49-
<path d="M114 370 L192 448 H114 Z" fill="url(#fs-light)"></path>
51+
<!-- Center Inverted Triangle (Symmetrical Gap) -->
52+
<path
53+
d="M180 120 H332 A4 4 0 0 1 335 127 L262 195 A8 8 0 0 1 250 195 L177 127 A4 4 0 0 1 180 120 Z"
54+
fill="url(#fs-silver)"></path>
5055

51-
<!-- Center Inverted Triangle -->
52-
<path d="M192 126 H318 L255 189 Z" fill="url(#fs-light)"></path>
56+
<!-- Middle-Left Bridge (Centered between pillar and stack) -->
57+
<path d="M120 170 L210 260 L120 350 Z" fill="url(#fs-blue)"></path>
5358

54-
<!-- Right Stack 1 (Short) -->
55-
<path d="M216 330 L294 252 V448 H216 Z" fill="url(#fs-mid)"></path>
59+
<!-- Right Stack 1 -->
60+
<path
61+
d="M230 330 L310 250 V442 A6 6 0 0 1 304 448 H236 A6 6 0 0 1 230 442 Z"
62+
fill="url(#fs-blue)"></path>
5663

57-
<!-- Right Stack 2 (Medium) -->
58-
<path d="M318 228 L396 150 V448 H318 Z" fill="url(#fs-mid)"></path>
64+
<!-- Right Stack 2 -->
65+
<path
66+
d="M330 230 L410 150 V442 A6 6 0 0 1 404 448 H336 A6 6 0 0 1 330 442 Z"
67+
fill="url(#fs-blue)"></path>
5968

60-
<!-- Right Stack 3 (Tall) -->
61-
<path d="M420 126 L498 48 V448 H420 Z" fill="url(#fs-dark)"></path>
69+
<!-- Right Stack 3 (Dark Anchor) -->
70+
<path
71+
d="M430 130 L510 50 V442 A6 6 0 0 1 504 448 H436 A6 6 0 0 1 430 442 Z"
72+
fill="url(#fs-dark)"></path>
6273
</g>
6374
</svg>
75+
76+
<style>
77+
/* Base transitions for hover effects if needed later */
78+
.furystack-logo {
79+
overflow: visible; /* Allow glow to spill out */
80+
}
81+
82+
/* Animations */
83+
@media (prefers-reduced-motion: no-preference) {
84+
.fs-shape {
85+
transform-box: fill-box;
86+
transform-origin: bottom center;
87+
opacity: 0;
88+
animation-duration: 0.8s;
89+
animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
90+
animation-fill-mode: forwards;
91+
}
92+
93+
.fs-slide-right {
94+
animation-name: fs-slide-right;
95+
transform-origin: center center;
96+
}
97+
98+
.fs-fade-down {
99+
animation-name: fs-fade-down;
100+
transform-origin: top center;
101+
}
102+
103+
.fs-grow-up {
104+
animation-name: fs-grow-up;
105+
}
106+
107+
.fs-delay-1 {
108+
animation-delay: 0.1s;
109+
}
110+
.fs-delay-2 {
111+
animation-delay: 0.2s;
112+
}
113+
.fs-delay-3 {
114+
animation-delay: 0.3s;
115+
}
116+
.fs-delay-4 {
117+
animation-delay: 0.4s;
118+
}
119+
120+
@keyframes fs-slide-right {
121+
from {
122+
opacity: 0;
123+
transform: translateX(-20px);
124+
}
125+
to {
126+
opacity: 1;
127+
transform: translateX(0);
128+
}
129+
}
130+
131+
@keyframes fs-fade-down {
132+
from {
133+
opacity: 0;
134+
transform: translateY(-20px);
135+
}
136+
to {
137+
opacity: 1;
138+
transform: translateY(0);
139+
}
140+
}
141+
142+
@keyframes fs-grow-up {
143+
from {
144+
opacity: 0;
145+
transform: scaleY(0.4);
146+
}
147+
to {
148+
opacity: 1;
149+
transform: scaleY(1);
150+
}
151+
}
152+
}
153+
</style>

0 commit comments

Comments
 (0)