|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NeuralGlow Circuitry - Home</title> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: #000000; |
|
|
height: 100vh; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.logo-container { |
|
|
position: relative; |
|
|
} |
|
|
svg { |
|
|
width: 1400px; |
|
|
height: 800px; |
|
|
transform: scale(1.4); |
|
|
filter: drop-shadow(0 0 60px rgba(237, 28, 36, 0.6)) |
|
|
drop-shadow(0 0 120px rgba(1, 0, 102, 0.4)); |
|
|
} |
|
|
|
|
|
.main-path { |
|
|
fill: none; |
|
|
stroke: #ffffff; |
|
|
stroke-width: 12; |
|
|
stroke-linecap: round; |
|
|
stroke-linejoin: round; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.core-path { |
|
|
fill: none; |
|
|
stroke: #ffffff; |
|
|
stroke-width: 10; |
|
|
stroke-linecap: round; |
|
|
stroke-linejoin: round; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.node-path { |
|
|
fill: none; |
|
|
stroke: #ffffff; |
|
|
stroke-width: 8; |
|
|
stroke-linecap: round; |
|
|
stroke-linejoin: round; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
@keyframes drawMainPath { |
|
|
0% { |
|
|
stroke-dashoffset: var(--path-length); |
|
|
stroke: #ed1c24; |
|
|
opacity: 1; |
|
|
filter: drop-shadow(0 0 120px #ed1c24) |
|
|
drop-shadow(0 0 240px #ed1c24) |
|
|
drop-shadow(0 0 360px rgba(237, 28, 36, 0.8)); |
|
|
} |
|
|
25% { |
|
|
stroke: #c41e3a; |
|
|
filter: drop-shadow(0 0 110px #c41e3a) |
|
|
drop-shadow(0 0 220px #c41e3a) |
|
|
drop-shadow(0 0 330px rgba(196, 30, 58, 0.7)); |
|
|
} |
|
|
50% { |
|
|
stroke: #8b1538; |
|
|
filter: drop-shadow(0 0 100px #8b1538) |
|
|
drop-shadow(0 0 200px #8b1538) |
|
|
drop-shadow(0 0 300px rgba(139, 21, 56, 0.6)); |
|
|
} |
|
|
75% { |
|
|
stroke: #4a0c4f; |
|
|
filter: drop-shadow(0 0 90px #4a0c4f) |
|
|
drop-shadow(0 0 180px #4a0c4f) |
|
|
drop-shadow(0 0 270px rgba(74, 12, 79, 0.5)); |
|
|
} |
|
|
90% { |
|
|
stroke: #010066; |
|
|
filter: drop-shadow(0 0 85px #010066) |
|
|
drop-shadow(0 0 170px #010066) |
|
|
drop-shadow(0 0 255px rgba(1, 0, 102, 0.4)); |
|
|
} |
|
|
100% { |
|
|
stroke-dashoffset: 0; |
|
|
stroke: #ffffff; |
|
|
opacity: 1; |
|
|
filter: drop-shadow(0 0 90px #ffffff) |
|
|
drop-shadow(0 0 180px rgba(255, 255, 255, 0.8)) |
|
|
drop-shadow(0 0 270px rgba(255, 255, 255, 0.6)); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes drawCorePath { |
|
|
0% { |
|
|
stroke-dashoffset: var(--path-length); |
|
|
stroke: #010066; |
|
|
opacity: 1; |
|
|
filter: drop-shadow(0 0 60px #010066) |
|
|
drop-shadow(0 0 120px #010066); |
|
|
} |
|
|
30% { |
|
|
stroke: #1a1a8b; |
|
|
filter: drop-shadow(0 0 55px #1a1a8b) |
|
|
drop-shadow(0 0 110px #1a1a8b); |
|
|
} |
|
|
60% { |
|
|
stroke: #3333b0; |
|
|
filter: drop-shadow(0 0 50px #3333b0) |
|
|
drop-shadow(0 0 100px #3333b0); |
|
|
} |
|
|
80% { |
|
|
stroke: #4d4dd5; |
|
|
filter: drop-shadow(0 0 45px #4d4dd5) |
|
|
drop-shadow(0 0 90px #4d4dd5); |
|
|
} |
|
|
100% { |
|
|
stroke-dashoffset: 0; |
|
|
stroke: #ffffff; |
|
|
opacity: 1; |
|
|
filter: drop-shadow(0 0 45px #ffffff) |
|
|
drop-shadow(0 0 90px rgba(255, 255, 255, 0.6)); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes drawNodePath { |
|
|
0% { |
|
|
stroke-dashoffset: var(--path-length); |
|
|
stroke: #ed1c24; |
|
|
opacity: 1; |
|
|
filter: drop-shadow(0 0 40px #ed1c24) |
|
|
drop-shadow(0 0 80px #ed1c24); |
|
|
} |
|
|
40% { |
|
|
stroke: #ff4d4d; |
|
|
filter: drop-shadow(0 0 35px #ff4d4d) |
|
|
drop-shadow(0 0 70px #ff4d4d); |
|
|
} |
|
|
70% { |
|
|
stroke: #ff8080; |
|
|
filter: drop-shadow(0 0 30px #ff8080) |
|
|
drop-shadow(0 0 60px #ff8080); |
|
|
} |
|
|
100% { |
|
|
stroke-dashoffset: 0; |
|
|
stroke: #ffffff; |
|
|
opacity: 1; |
|
|
filter: drop-shadow(0 0 35px #ffffff) |
|
|
drop-shadow(0 0 70px rgba(255, 255, 255, 0.5)); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes redBluePulse { |
|
|
0%, 100% { |
|
|
filter: drop-shadow(0 0 40px #ed1c24) |
|
|
drop-shadow(0 0 80px #010066) |
|
|
drop-shadow(0 0 120px rgba(255, 255, 255, 0.3)); |
|
|
} |
|
|
33% { |
|
|
filter: drop-shadow(0 0 50px #c41e3a) |
|
|
drop-shadow(0 0 100px #1a1a8b) |
|
|
drop-shadow(0 0 150px rgba(255, 255, 255, 0.4)); |
|
|
} |
|
|
66% { |
|
|
filter: drop-shadow(0 0 60px #010066) |
|
|
drop-shadow(0 0 120px #ed1c24) |
|
|
drop-shadow(0 0 180px rgba(255, 255, 255, 0.5)); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.particle-red { |
|
|
position: absolute; |
|
|
width: 6px; |
|
|
height: 6px; |
|
|
background: radial-gradient(circle, #ed1c24 0%, #c41e3a 50%, transparent 80%); |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
box-shadow: 0 0 20px #ed1c24, 0 0 40px #c41e3a; |
|
|
} |
|
|
|
|
|
.particle-blue { |
|
|
position: absolute; |
|
|
width: 5px; |
|
|
height: 5px; |
|
|
background: radial-gradient(circle, #010066 0%, #1a1a8b 50%, transparent 80%); |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
box-shadow: 0 0 15px #010066, 0 0 30px #1a1a8b; |
|
|
} |
|
|
|
|
|
@keyframes particleFlyRedBlue { |
|
|
0% { |
|
|
transform: translate(0, 0) scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.9; |
|
|
transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) scale(1.3); |
|
|
} |
|
|
100% { |
|
|
transform: translate(var(--dx), var(--dy)) scale(0); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.brand-text { |
|
|
position: absolute; |
|
|
bottom: -120px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
color: #333333; |
|
|
font-family: 'Arial', sans-serif; |
|
|
font-size: 32px; |
|
|
font-weight: bold; |
|
|
letter-spacing: 16px; |
|
|
text-transform: uppercase; |
|
|
opacity: 0; |
|
|
animation: fadeInRedBlue 4s ease-out forwards; |
|
|
animation-delay: 10s; |
|
|
} |
|
|
|
|
|
@keyframes fadeInRedBlue { |
|
|
0% { |
|
|
opacity: 0; |
|
|
color: #333333; |
|
|
text-shadow: none; |
|
|
} |
|
|
25% { |
|
|
opacity: 0.4; |
|
|
color: #ed1c24; |
|
|
text-shadow: 0 0 20px #ed1c24; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.6; |
|
|
color: #8b1538; |
|
|
text-shadow: 0 0 25px #8b1538, 0 0 50px #ed1c24; |
|
|
} |
|
|
75% { |
|
|
opacity: 0.8; |
|
|
color: #010066; |
|
|
text-shadow: 0 0 30px #010066, 0 0 60px #1a1a8b; |
|
|
} |
|
|
100% { |
|
|
opacity: 1; |
|
|
color: #ffffff; |
|
|
text-shadow: 0 0 40px #ed1c24, 0 0 80px #010066, 0 0 120px rgba(255, 255, 255, 0.8); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="logo-container cursor-pointer" onclick="window.location.href='login.html'"> |
|
|
|
|
|
<svg viewBox="0 0 3840 2160" preserveAspectRatio="xMidYMid meet"> |
|
|
<defs> |
|
|
<filter id="red-blue-glow"> |
|
|
<feGaussianBlur stdDeviation="10" result="coloredBlur"/> |
|
|
<feMerge> |
|
|
<feMergeNode in="coloredBlur"/> |
|
|
<feMergeNode in="SourceGraphic"/> |
|
|
</feMerge> |
|
|
</filter> |
|
|
</defs> |
|
|
|
|
|
<g transform="translate(0,2160) scale(0.1,-0.1)"> |
|
|
|
|
|
|
|
|
<path class="main-path" id="main-brain" d="M19135 18870 c460 -44 724 -94 1025 -197 174 -59 276 -102 425 -178 721 -368 1279 -997 1636 -1846 174 -415 237 -785 198 -1175 -39 -397 -114 -568 -721 -1649 -50 -88 -94 -171 -100 -184 -25 -66 -48 -177 -48 -230 0 -49 -4 -65 -24 -88 -33 -39 -95 -39 -133 0 -25 25 -27 33 -26 101 1 106 39 244 98 361 28 55 139 258 247 450 349 625 450 846 496 1085 56 293 55 449 -4 765 -63 329 -251 755 -509 1150 -442 677 -1060 1126 -1825 1326 -216 56 -500 98 -686 102 l-109 2 0 -415 0 -414 35 -8 c19 -4 73 -14 120 -23 396 -76 785 -334 1007 -667 l45 -68 353 0 c221 0 374 -4 407 -11 76 -16 185 -76 244 -134 71 -69 96 -138 97 -265 1 -88 -2 -100 -32 -164 -30 -62 -87 -131 -150 -179 -13 -10 -19 -22 -15 -27 5 -5 50 -10 100 -12 83 -3 98 -7 168 -42 101 -51 167 -114 202 -191 24 -52 27 -73 28 -165 1 -99 -1 -109 -31 -171 -23 -46 -53 -85 -98 -128 -101 -94 -181 -127 -344 -140 l-76 -6 -3 -208 -2 -207 27 -11 c70 -26 117 -57 162 -104 70 -74 93 -125 99 -215 16 -280 -277 -505 -550 -420 -294 91 -369 424 -145 642 19 18 75 53 123 78 l89 45 5 268 5 269 28 24 c25 21 37 24 117 24 82 0 142 8 232 31 45 12 125 76 155 126 17 29 23 53 23 101 0 95 -28 136 -127 186 l-52 26 -405 0 c-377 0 -405 -1 -410 -17 -2 -10 -8 -43 -11 -73 -23 -184 -108 -421 -215 -595 -111 -182 -296 -374 -473 -493 -213 -142 -425 -221 -697 -259 -96 -13 -130 -22 -133 -33 -2 -8 -5 -540 -6 -1183 -2 -1040 -1 -1168 13 -1173 10 -4 84 57 228 187 117 106 216 198 220 204 4 5 8 191 8 413 l0 402 -53 34 c-98 63 -160 151 -191 273 -9 34 -16 78 -16 98 0 51 27 149 57 208 32 64 106 138 174 174 50 26 63 28 159 28 88 -1 113 -4 155 -23 205 -95 308 -310 245 -514 -44 -142 -156 -249 -305 -292 l-40 -12 -5 -438 -5 -438 -46 -42 c-25 -22 -126 -116 -225 -207 -98 -91 -233 -214 -299 -273 -109 -96 -123 -106 -159 -106 -27 0 -47 7 -63 22 l-23 21 -1 1231 c-1 677 -4 1276 -8 1331 l-6 100 -40 7 c-246 40 -358 73 -520 153 -287 140 -517 352 -674 620 -78 134 -147 303 -179 445 -26 110 -31 139 -38 207 -3 40 -12 77 -19 83 -8 7 -99 9 -256 8 l-244 -3 0 -314 0 -315 70 -35 c122 -61 225 -191 254 -321 61 -267 -125 -502 -409 -518 -255 -13 -467 166 -478 405 -6 131 41 247 142 348 43 43 150 105 181 105 8 0 24 9 35 20 20 20 20 33 20 629 0 536 -2 610 -15 621 -9 7 -38 23 -64 36 -64 29 -126 86 -172 156 -161 249 -17 585 274 639 233 42 466 -158 467 -401 0 -166 -94 -324 -241 -401 l-64 -34 0 -210 0 -210 240 -5 c132 -3 248 -2 257 3 11 4 19 24 23 55 19 137 66 317 111 425 231 548 722 917 1305 981 82 8 124 17 130 27 12 20 12 785 -1 809 -9 17 -20 19 -103 15 -50 -3 -147 -7 -215 -10 -129 -5 -322 -26 -457 -50 -714 -125 -1256 -414 -1778 -949 -245 -250 -394 -590 -469 -1066 -33 -210 -4 -860 64 -1427 l12 -101 -66 -134 c-124 -248 -344 -638 -651 -1153 -186 -311 -225 -389 -214 -419 9 -23 86 -76 257 -177 490 -290 531 -323 546 -432 9 -64 -8 -124 -74 -257 -54 -109 -57 -119 -56 -186 2 -80 12 -102 117 -231 76 -95 102 -152 123 -274 26 -147 16 -339 -40 -774 -9 -66 -22 -165 -31 -220 -31 -203 -37 -271 -31 -334 11 -119 71 -186 245 -275 167 -84 194 -91 356 -90 161 1 291 25 445 81 219 79 295 96 445 97 92 0 119 -3 166 -22 106 -42 181 -129 220 -253 18 -58 19 -117 19 -1428 0 -976 -3 -1377 -11 -1400 -11 -31 -52 -61 -84 -61 -25 0 -72 28 -80 47 -4 10 -9 644 -12 1408 l-5 1390 -27 45 c-40 67 -87 90 -188 90 -101 0 -189 -18 -318 -65 -55 -20 -118 -42 -140 -50 -86 -29 -362 -75 -449 -75 -59 0 -181 22 -252 45 -68 23 -260 120 -315 161 -162 119 -228 306 -189 539 45 263 99 707 106 870 7 155 -5 273 -35 339 -10 22 -46 75 -80 116 -72 87 -105 146 -126 227 -32 124 -17 207 75 393 45 92 49 106 37 124 -19 30 -157 123 -332 224 -295 170 -407 250 -441 314 -9 17 -14 58 -14 115 0 82 3 93 38 163 20 41 82 149 136 240 180 299 368 622 469 805 55 99 113 205 130 235 17 30 56 105 87 167 56 111 57 112 48 170 -35 241 -78 856 -78 1128 0 216 16 363 61 568 72 326 205 620 379 832 66 81 278 288 400 391 371 313 841 549 1325 663 28 7 66 16 85 21 274 71 947 126 1225 100z"/> |
|
|
|
|
|
|
|
|
<path class="main-path" id="structure-1" d="M23403 15531 c78 -37 160 -121 203 -207 27 -56 29 -66 29 -184 0 -118 -2 -128 -30 -185 -40 -81 -110 -149 -190 -185 l-65 -29 0 -379 c0 -366 -1 -380 -20 -405 -11 -14 -138 -126 -283 -248 -144 -123 -322 -274 -394 -336 -404 -344 -664 -566 -868 -738 -78 -66 -245 -208 -370 -315 -126 -107 -246 -208 -266 -225 -38 -32 -935 -795 -1174 -1000 -77 -66 -189 -160 -248 -209 l-107 -89 -2 -1878 -3 -1878 -21 -21 c-11 -11 -37 -23 -57 -27 -31 -5 -40 -1 -67 25 l-30 30 0 1913 0 1913 53 50 c28 28 98 89 153 136 56 47 200 169 320 271 121 103 302 257 404 344 102 86 239 203 305 259 66 57 241 206 389 332 500 425 621 528 1016 864 217 184 533 454 704 599 171 145 328 279 349 299 l37 36 0 331 c0 181 -4 335 -8 341 -4 6 -42 27 -84 47 -120 55 -191 138 -224 262 -19 68 -17 103 7 193 35 134 114 236 224 291 69 35 100 41 182 36 54 -2 88 -11 136 -34z"/> |
|
|
|
|
|
<path class="main-path" id="structure-2" d="M18034 13666 c157 -77 254 -267 226 -441 -20 -124 -107 -242 -215 -291 l-55 -25 -1 -692 c0 -381 -3 -825 -5 -987 l-4 -295 -25 -24 c-34 -35 -87 -34 -123 2 l-27 27 -3 978 c-1 537 -5 982 -7 989 -2 7 -28 24 -56 39 -73 37 -159 125 -197 204 -77 156 -59 308 51 427 81 88 170 124 298 120 70 -2 96 -8 143 -31z"/> |
|
|
|
|
|
<path class="main-path" id="structure-3" d="M20524 13605 c139 -42 241 -158 261 -295 8 -55 -15 -154 -53 -223 -32 -59 -104 -127 -169 -161 -28 -14 -53 -33 -57 -42 -4 -9 -6 -99 -6 -200 1 -112 -3 -190 -9 -202 -6 -11 -77 -75 -158 -141 -561 -456 -1184 -962 -1475 -1198 l-118 -95 0 -2213 0 -2213 -25 -31 c-32 -38 -58 -46 -96 -30 -63 26 -59 -148 -59 2311 1 1740 3 2248 13 2265 10 18 140 127 517 433 326 264 848 689 1023 832 l207 169 0 158 c0 175 1 172 -72 205 -54 25 -128 103 -157 166 -23 48 -26 68 -26 155 0 87 3 107 26 155 75 159 267 245 433 195z"/> |
|
|
|
|
|
<path class="main-path" id="structure-4" d="M23360 13289 c128 -20 252 -106 300 -205 56 -115 39 -291 -41 -415 -45 -71 -131 -146 -206 -181 -128 -60 -285 -47 -407 33 -29 19 -50 27 -59 22 -12 -7 -490 -406 -1467 -1222 -201 -168 -401 -335 -444 -371 -110 -90 -475 -396 -508 -426 l-28 -24 0 -1236 c0 -920 -3 -1241 -12 -1257 -17 -34 -39 -46 -80 -47 -28 0 -42 7 -62 31 l-26 31 0 1271 c0 1003 3 1277 13 1297 7 14 217 196 468 405 250 209 657 549 904 755 246 206 505 422 575 480 365 302 556 463 568 480 10 14 11 24 3 39 -6 11 -11 55 -11 98 1 84 23 167 64 237 56 95 189 188 295 206 67 11 89 11 161 -1z"/> |
|
|
|
|
|
|
|
|
<path class="core-path" id="ai-core" d="M18796 17640 c-562 -53 -1039 -434 -1216 -971 -44 -136 -63 -264 -62 -434 0 -179 18 -297 71 -453 134 -402 474 -742 875 -876 160 -53 266 -70 456 -70 261 -1 416 35 643 151 339 173 601 489 708 853 44 149 52 211 53 395 0 185 -6 232 -53 400 -101 361 -378 690 -729 864 -222 111 -502 164 -746 141z m494 -432 c12 -30 85 -236 167 -468 75 -214 165 -471 253 -720 126 -357 163 -466 167 -492 l5 -28 -318 0 c-176 0 -324 4 -331 8 -11 7 -53 123 -53 148 0 6 40 46 90 90 123 109 122 114 -34 114 -76 0 -127 4 -131 10 -32 51 -478 1338 -469 1352 3 4 149 8 325 8 l319 0 10 -22z m-702 -323 c94 -244 272 -743 272 -763 0 -18 -67 -232 -79 -250 -5 -9 -44 -15 -119 -19 -80 -4 -112 -10 -112 -19 0 -6 36 -42 80 -80 44 -37 80 -74 80 -83 0 -24 -39 -143 -51 -158 -9 -10 -78 -12 -335 -10 -178 1 -324 6 -324 10 0 12 159 468 347 997 197 554 183 514 187 509 2 -2 27 -62 54 -134z"/> |
|
|
|
|
|
|
|
|
<path class="node-path" id="node-1" d="M16645 17422 c-82 -38 -145 -137 -145 -226 0 -143 177 -265 296 -203 44 23 99 87 119 140 64 168 -116 361 -270 289z"/> |
|
|
|
|
|
<path class="node-path" id="node-2" d="M20413 16863 c-3 -6 13 -78 35 -160 22 -81 46 -173 53 -203 7 -30 17 -61 22 -67 7 -10 63 -13 221 -13 260 0 293 8 373 83 68 64 86 105 80 175 -9 92 -60 147 -168 187 -43 15 -83 16 -330 13 -204 -2 -283 -6 -286 -15z"/> |
|
|
|
|
|
<path class="node-path" id="node-3" d="M16650 15346 c-99 -26 -177 -103 -206 -203 -24 -82 -6 -142 60 -208 105 -104 244 -114 369 -28 88 61 115 178 64 279 -36 71 -112 139 -178 158 -61 18 -51 18 -109 2z"/> |
|
|
|
|
|
<path class="node-path" id="node-4" d="M20925 14821 c-90 -41 -145 -118 -145 -203 0 -125 165 -217 291 -161 143 64 205 210 127 299 -67 76 -187 105 -273 65z"/> |
|
|
|
|
|
<path class="node-path" id="node-5" d="M19483 14080 c-98 -59 -138 -209 -86 -315 20 -39 71 -93 105 -111 46 -24 116 -18 175 16 169 97 168 293 -1 399 -62 38 -141 43 -193 11z"/> |
|
|
|
|
|
<path class="node-path" id="node-6" d="M23169 15360 c-77 -41 -139 -144 -139 -232 0 -150 211 -252 338 -164 59 40 87 98 87 176 -1 77 -25 130 -81 180 -71 62 -139 75 -205 40z"/> |
|
|
|
|
|
<path class="node-path" id="node-7" d="M17782 13489 c-125 -62 -136 -208 -24 -323 42 -45 103 -75 148 -76 49 0 118 53 148 112 29 57 32 91 14 150 -13 45 -77 122 -119 143 -41 22 -116 19 -167 -6z"/> |
|
|
|
|
|
<path class="node-path" id="node-8" d="M20345 13413 c-105 -55 -137 -175 -68 -261 62 -78 146 -91 227 -36 55 39 100 124 91 174 -19 104 -157 172 -250 123z"/> |
|
|
|
|
|
<path class="node-path" id="node-9" d="M23197 13094 c-56 -17 -123 -79 -151 -137 -9 -21 -20 -62 -23 -90 -14 -143 148 -264 291 -217 92 30 196 173 196 270 0 45 -26 101 -59 128 -68 54 -172 73 -254 46z"/> |
|
|
|
|
|
<path class="node-path" id="node-10" d="M16927 11796 c-107 -39 -217 -165 -217 -248 0 -61 111 -138 200 -138 115 0 230 106 230 213 0 44 -45 132 -81 158 -38 27 -85 32 -132 15z"/> |
|
|
|
|
|
<path class="node-path" id="node-11" d="M22146 11135 c-77 -27 -156 -137 -156 -218 0 -100 69 -154 187 -144 143 11 268 155 234 268 -27 89 -154 134 -265 94z"/> |
|
|
|
|
|
<path class="node-path" id="node-12" d="M17772 11970 c91 -41 164 -124 197 -224 26 -76 17 -214 -16 -287 -50 -107 -142 -184 -260 -219 -82 -25 -136 -25 -220 -2 -85 24 -144 59 -198 117 -65 70 -84 123 -79 211 11 161 144 329 318 401 73 30 195 32 258 3z"/> |
|
|
|
|
|
<path class="node-path" id="node-13" d="M22999 6644 c111 -29 183 -82 230 -167 37 -69 45 -175 20 -262 -33 -113 -131 -224 -243 -277 -106 -50 -255 -52 -360 -5 l-60 27 -273 -227 c-151 -125 -280 -234 -286 -243 -10 -12 -13 -156 -13 -643 l0 -627 -26 -31 c-35 -42 -84 -43 -125 -2 l-29 29 0 674 0 673 63 57 c34 32 177 154 317 271 l255 213 6 115 c6 125 19 169 78 258 57 88 148 146 276 174 42 10 122 6 170 -7z"/> |
|
|
|
|
|
<path class="node-path" id="node-14" d="M14649 5125 c-63 -20 -131 -83 -160 -147 -20 -44 -24 -69 -23 -143 0 -107 22 -162 88 -223 111 -102 321 -94 418 17 54 61 72 116 72 212 0 133 -47 214 -158 271 -53 27 -172 34 -237 13z"/> |
|
|
|
|
|
<path class="node-path" id="node-15" d="M22807 5473 c-18 -30 -237 -569 -237 -583 0 -6 92 -10 245 -10 135 0 245 3 245 8 0 4 -29 77 -63 162 -189 461 -180 440 -190 423z"/> |
|
|
|
|
|
<path class="node-path" id="node-16" d="M15845 4806 c-112 -23 -175 -76 -175 -147 0 -84 48 -127 151 -136 176 -16 282 69 291 232 l3 60 -105 2 c-58 1 -132 -4 -165 -11z"/> |
|
|
|
|
|
<path class="node-path" id="node-17" d="M20750 4806 c-116 -21 -180 -74 -180 -147 0 -98 51 -134 191 -134 89 0 99 2 145 30 64 40 103 113 106 200 l3 60 -100 2 c-55 1 -129 -4 -165 -11z"/> |
|
|
</g> |
|
|
</svg> |
|
|
<div class="brand-text">NeuralGlow Circuitry</div> |
|
|
<div id="particles"></div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mainPaths = document.querySelectorAll('.main-path'); |
|
|
const corePaths = document.querySelectorAll('.core-path'); |
|
|
const nodePaths = document.querySelectorAll('.node-path'); |
|
|
|
|
|
|
|
|
function initializePathAnimation(paths, animationType, baseDelay = 0) { |
|
|
paths.forEach((path, index) => { |
|
|
const pathLength = path.getTotalLength(); |
|
|
|
|
|
|
|
|
path.style.strokeDasharray = pathLength; |
|
|
path.style.strokeDashoffset = pathLength; |
|
|
path.style.setProperty('--path-length', pathLength); |
|
|
|
|
|
let animationName, delay, duration; |
|
|
|
|
|
switch(animationType) { |
|
|
case 'main': |
|
|
animationName = 'drawMainPath'; |
|
|
delay = baseDelay + (index * 1000); |
|
|
duration = 12000; |
|
|
break; |
|
|
case 'core': |
|
|
animationName = 'drawCorePath'; |
|
|
delay = baseDelay + 3000 + (index * 800); |
|
|
duration = 10000; |
|
|
break; |
|
|
case 'node': |
|
|
animationName = 'drawNodePath'; |
|
|
delay = baseDelay + 6000 + (index * 300); |
|
|
duration = 8000; |
|
|
break; |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
path.style.animation = `${animationName} ${duration}ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards`; |
|
|
|
|
|
|
|
|
generateRedBlueParticles(path, animationType); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
path.style.animation = `${animationName} ${duration}ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards, redBluePulse 5s ease-in-out infinite`; |
|
|
}, duration); |
|
|
}, delay); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
initializePathAnimation(mainPaths, 'main', 0); |
|
|
initializePathAnimation(corePaths, 'core', 0); |
|
|
initializePathAnimation(nodePaths, 'node', 0); |
|
|
|
|
|
|
|
|
function generateRedBlueParticles(pathElement, type) { |
|
|
const particlesContainer = document.getElementById('particles'); |
|
|
const bbox = pathElement.getBBox(); |
|
|
|
|
|
const waveCount = type === 'main' ? 10 : type === 'core' ? 8 : 6; |
|
|
const particleCount = type === 'main' ? 20 : type === 'core' ? 15 : 10; |
|
|
|
|
|
for (let wave = 0; wave < waveCount; wave++) { |
|
|
setTimeout(() => { |
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
|
|
|
|
|
|
const isRed = (type === 'main' && Math.random() < 0.6) || |
|
|
(type === 'node' && Math.random() < 0.7) || |
|
|
(type === 'core' && Math.random() < 0.4); |
|
|
|
|
|
particle.className = isRed ? 'particle-red' : 'particle-blue'; |
|
|
|
|
|
|
|
|
const x = bbox.x / 10 + Math.random() * bbox.width / 10; |
|
|
const y = bbox.y / 10 + Math.random() * bbox.height / 10; |
|
|
|
|
|
particle.style.left = x + 'px'; |
|
|
particle.style.top = y + 'px'; |
|
|
|
|
|
|
|
|
const angle = Math.random() * Math.PI * 2; |
|
|
const distance = 80 + Math.random() * 250; |
|
|
particle.style.setProperty('--dx', Math.cos(angle) * distance + 'px'); |
|
|
particle.style.setProperty('--dy', Math.sin(angle) * distance + 'px'); |
|
|
|
|
|
particle.style.animation = `particleFlyRedBlue ${2.5 + Math.random() * 2}s ease-out forwards`; |
|
|
|
|
|
particlesContainer.appendChild(particle); |
|
|
|
|
|
|
|
|
setTimeout(() => particle.remove(), 4500); |
|
|
} |
|
|
}, wave * 1000); |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
