github-such-software/such.software
1
0
Fork 0
mirror of https://github.com/Such-Software/such.software.git synced 2026-10-17 05:32:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

update logos and image strucutre

Browse Source
This commit is contained in:
jwinterm
2026-02-07 22:29:23 -05:00
parent 375e7e2868
commit 357d5b4122
63 changed files with 2482 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/public/images/animations/anim1_pulse.svg
+127
View File
@@ -0,0 +1,127 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="1.5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="pulseGlow">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- The Z-trace path as reusable definition -->
<path id="trace" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 52"/>
</defs>
<!-- Background -->
<rect width="200" height="200" rx="26" fill="#0a0a0a"/>
<!-- Base trace (dim) -->
<use href="#trace" fill="none" stroke="#45c99e" stroke-width="2" opacity="0.2"
stroke-linecap="round" stroke-linejoin="round"/>
<!-- Pulse 1: bright traveling dash -->
<use href="#trace" fill="none" stroke="#45c99e" stroke-width="3" opacity="0.9"
stroke-linecap="round" stroke-linejoin="round" filter="url(#pulseGlow)"
stroke-dasharray="30 568">
<animate attributeName="stroke-dashoffset" from="0" to="-598" dur="3s" repeatCount="indefinite"/>
</use>
<!-- Pulse 2: offset by half -->
<use href="#trace" fill="none" stroke="#7ddfbe" stroke-width="2" opacity="0.6"
stroke-linecap="round" stroke-linejoin="round" filter="url(#pulseGlow)"
stroke-dasharray="20 578">
<animate attributeName="stroke-dashoffset" from="-299" to="-897" dur="3s" repeatCount="indefinite"/>
</use>
<!-- Pulse 3: smaller, faster accent -->
<use href="#trace" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.4"
stroke-linecap="round" stroke-linejoin="round"
stroke-dasharray="8 590">
<animate attributeName="stroke-dashoffset" from="-100" to="-698" dur="3s" repeatCount="indefinite"/>
</use>
<!-- Nodes that pulse as signal passes -->
<g filter="url(#pulseGlow)">
<!-- Entry node -->
<circle cx="20" cy="28" r="2.5" fill="#45c99e">
<animate attributeName="r" values="2.5;4.5;2.5" dur="3s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite"/>
</circle>
<!-- Top chevron -->
<circle cx="92" cy="34" r="2" fill="#45c99e">
<animate attributeName="r" values="2;3.5;2" dur="3s" begin="0.28s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="0.28s" repeatCount="indefinite"/>
</circle>
<circle cx="108" cy="34" r="2" fill="#45c99e">
<animate attributeName="r" values="2;3.5;2" dur="3s" begin="0.33s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="0.33s" repeatCount="indefinite"/>
</circle>
<!-- Top-right corner -->
<circle cx="178" cy="34" r="2.5" fill="#45c99e">
<animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="0.55s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="0.55s" repeatCount="indefinite"/>
</circle>
<!-- Right bend -->
<circle cx="172" cy="100" r="2.5" fill="#45c99e">
<animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="0.9s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="0.9s" repeatCount="indefinite"/>
</circle>
<!-- Center -->
<circle cx="100" cy="100" r="2.5" fill="#45c99e">
<animate attributeName="r" values="2.5;5;2.5" dur="3s" begin="1.25s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="1.25s" repeatCount="indefinite"/>
</circle>
<!-- Left bend -->
<circle cx="28" cy="100" r="2.5" fill="#45c99e">
<animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="1.55s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="1.55s" repeatCount="indefinite"/>
</circle>
<!-- Bottom-left corner -->
<circle cx="22" cy="166" r="2.5" fill="#45c99e">
<animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="1.9s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="1.9s" repeatCount="indefinite"/>
</circle>
<!-- Bottom chevron -->
<circle cx="92" cy="166" r="2" fill="#45c99e">
<animate attributeName="r" values="2;3.5;2" dur="3s" begin="2.2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="2.2s" repeatCount="indefinite"/>
</circle>
<circle cx="108" cy="166" r="2" fill="#45c99e">
<animate attributeName="r" values="2;3.5;2" dur="3s" begin="2.25s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="2.25s" repeatCount="indefinite"/>
</circle>
<!-- Exit node -->
<circle cx="166" cy="172" r="2.5" fill="#45c99e">
<animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="2.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="2.5s" repeatCount="indefinite"/>
</circle>
</g>
<!-- Border -->
<rect x="14" y="14" width="172" height="172" rx="16" fill="none"
stroke="#45c99e" stroke-width="3.5" filter="url(#glow)" opacity="0.7"/>
<!-- S -->
<path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
fill="none" stroke="#35925c" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round"/>
<!-- U -->
<path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
fill="none" stroke="#e8689e" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round"/>
<!-- C -->
<path d="M 78,118 H 36 V 164 H 78"
fill="none" stroke="#4aade0" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round"/>
<!-- H -->
<path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
fill="none" stroke="#45c99e" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

apps/web/public/images/animations/anim1_pulse_light.svg
+127
View File
@@ -0,0 +1,127 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="1.5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="pulseGlow">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- The Z-trace path as reusable definition -->
<path id="trace" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 52"/>
</defs>
<!-- Background -->
<rect width="200" height="200" rx="26" fill="#f5f5f5"/>
<!-- Base trace (dim) -->
<use href="#trace" fill="none" stroke="#1a7a5a" stroke-width="2" opacity="0.2"
stroke-linecap="round" stroke-linejoin="round"/>
<!-- Pulse 1: bright traveling dash -->
<use href="#trace" fill="none" stroke="#1a7a5a" stroke-width="3" opacity="0.7"
stroke-linecap="round" stroke-linejoin="round" filter="url(#pulseGlow)"
stroke-dasharray="30 568">
<animate attributeName="stroke-dashoffset" from="0" to="-598" dur="3s" repeatCount="indefinite"/>
</use>
<!-- Pulse 2: offset by half -->
<use href="#trace" fill="none" stroke="#2a9a6a" stroke-width="2" opacity="0.5"
stroke-linecap="round" stroke-linejoin="round" filter="url(#pulseGlow)"
stroke-dasharray="20 578">
<animate attributeName="stroke-dashoffset" from="-299" to="-897" dur="3s" repeatCount="indefinite"/>
</use>
<!-- Pulse 3: smaller, faster accent -->
<use href="#trace" fill="none" stroke="#333333" stroke-width="1.5" opacity="0.3"
stroke-linecap="round" stroke-linejoin="round"
stroke-dasharray="8 590">
<animate attributeName="stroke-dashoffset" from="-100" to="-698" dur="3s" repeatCount="indefinite"/>
</use>
<!-- Nodes that pulse as signal passes -->
<g filter="url(#pulseGlow)">
<!-- Entry node -->
<circle cx="20" cy="28" r="2.5" fill="#1a7a5a">
<animate attributeName="r" values="2.5;4.5;2.5" dur="3s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite"/>
</circle>
<!-- Top chevron -->
<circle cx="92" cy="34" r="2" fill="#1a7a5a">
<animate attributeName="r" values="2;3.5;2" dur="3s" begin="0.28s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="0.28s" repeatCount="indefinite"/>
</circle>
<circle cx="108" cy="34" r="2" fill="#1a7a5a">
<animate attributeName="r" values="2;3.5;2" dur="3s" begin="0.33s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="0.33s" repeatCount="indefinite"/>
</circle>
<!-- Top-right corner -->
<circle cx="178" cy="34" r="2.5" fill="#1a7a5a">
<animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="0.55s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="0.55s" repeatCount="indefinite"/>
</circle>
<!-- Right bend -->
<circle cx="172" cy="100" r="2.5" fill="#1a7a5a">
<animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="0.9s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="0.9s" repeatCount="indefinite"/>
</circle>
<!-- Center -->
<circle cx="100" cy="100" r="2.5" fill="#1a7a5a">
<animate attributeName="r" values="2.5;5;2.5" dur="3s" begin="1.25s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="1.25s" repeatCount="indefinite"/>
</circle>
<!-- Left bend -->
<circle cx="28" cy="100" r="2.5" fill="#1a7a5a">
<animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="1.55s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="1.55s" repeatCount="indefinite"/>
</circle>
<!-- Bottom-left corner -->
<circle cx="22" cy="166" r="2.5" fill="#1a7a5a">
<animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="1.9s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="1.9s" repeatCount="indefinite"/>
</circle>
<!-- Bottom chevron -->
<circle cx="92" cy="166" r="2" fill="#1a7a5a">
<animate attributeName="r" values="2;3.5;2" dur="3s" begin="2.2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="2.2s" repeatCount="indefinite"/>
</circle>
<circle cx="108" cy="166" r="2" fill="#1a7a5a">
<animate attributeName="r" values="2;3.5;2" dur="3s" begin="2.25s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="2.25s" repeatCount="indefinite"/>
</circle>
<!-- Exit node -->
<circle cx="166" cy="172" r="2.5" fill="#1a7a5a">
<animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="2.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="2.5s" repeatCount="indefinite"/>
</circle>
</g>
<!-- Border -->
<rect x="14" y="14" width="172" height="172" rx="16" fill="none"
stroke="#1a7a5a" stroke-width="3.5" filter="url(#glow)" opacity="0.5"/>
<!-- S -->
<path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
fill="none" stroke="#1e6e45" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round"/>
<!-- U -->
<path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
fill="none" stroke="#c44e7a" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round"/>
<!-- C -->
<path d="M 78,118 H 36 V 164 H 78"
fill="none" stroke="#2e85b8" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round"/>
<!-- H -->
<path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
fill="none" stroke="#1a7a5a" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

apps/web/public/images/animations/anim3_matrix.svg
+205
View File
@@ -0,0 +1,205 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="1.5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="megaGlow">
<feGaussianBlur stdDeviation="5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="warpGlow">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<path id="trace" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 52"/>
<!-- Animated gradient for border -->
<linearGradient id="shiftGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%">
<animate attributeName="stop-color" values="#35925c;#e8689e;#4aade0;#45c99e;#35925c" dur="4s" repeatCount="indefinite"/>
</stop>
<stop offset="50%">
<animate attributeName="stop-color" values="#4aade0;#45c99e;#e8689e;#35925c;#4aade0" dur="4s" repeatCount="indefinite"/>
</stop>
<stop offset="100%">
<animate attributeName="stop-color" values="#e8689e;#4aade0;#35925c;#e8689e;#e8689e" dur="4s" repeatCount="indefinite"/>
</stop>
</linearGradient>
<!-- Radial pulse for shockwaves -->
<radialGradient id="shockS" cx="57" cy="59" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#35925c" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#35925c" stop-opacity="0"/>
</radialGradient>
<radialGradient id="shockU" cx="140" cy="55" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#e8689e" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#e8689e" stop-opacity="0"/>
</radialGradient>
<radialGradient id="shockC" cx="57" cy="141" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#4aade0" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#4aade0" stop-opacity="0"/>
</radialGradient>
<radialGradient id="shockH" cx="140" cy="141" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#45c99e" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#45c99e" stop-opacity="0"/>
</radialGradient>
<clipPath id="roundClip">
<rect width="200" height="200" rx="26"/>
</clipPath>
</defs>
<!-- Background -->
<rect width="200" height="200" rx="26" fill="#050508"/>
<!-- Matrix rain columns (clipped to rounded rect) -->
<g clip-path="url(#roundClip)" opacity="0.12" font-family="'SF Mono','Fira Code',monospace" font-size="10" fill="#45c99e">
<text x="10" y="0"><animate attributeName="y" from="-20" to="220" dur="2.1s" repeatCount="indefinite"/>01</text>
<text x="25" y="0"><animate attributeName="y" from="-60" to="220" dur="1.8s" repeatCount="indefinite"/>{ }</text>
<text x="42" y="0"><animate attributeName="y" from="-40" to="220" dur="2.5s" repeatCount="indefinite"/>S</text>
<text x="58" y="0"><animate attributeName="y" from="-80" to="220" dur="1.6s" repeatCount="indefinite"/>10</text>
<text x="74" y="0"><animate attributeName="y" from="-10" to="220" dur="2.8s" repeatCount="indefinite"/>U</text>
<text x="90" y="0"><animate attributeName="y" from="-50" to="220" dur="2.0s" repeatCount="indefinite"/>0x</text>
<text x="106" y="0"><animate attributeName="y" from="-90" to="220" dur="1.7s" repeatCount="indefinite"/>C</text>
<text x="122" y="0"><animate attributeName="y" from="-30" to="220" dur="2.3s" repeatCount="indefinite"/>fn</text>
<text x="138" y="0"><animate attributeName="y" from="-70" to="220" dur="1.9s" repeatCount="indefinite"/>H</text>
<text x="154" y="0"><animate attributeName="y" from="-15" to="220" dur="2.6s" repeatCount="indefinite"/>;</text>
<text x="170" y="0"><animate attributeName="y" from="-55" to="220" dur="2.2s" repeatCount="indefinite"/>=></text>
<text x="185" y="0"><animate attributeName="y" from="-35" to="220" dur="1.5s" repeatCount="indefinite"/>[]</text>
</g>
<!-- Shockwave rings when letters appear -->
<circle cx="57" cy="59" r="0" fill="url(#shockS)" opacity="0">
<animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.14;0.15;0.25;0.26;1" dur="6s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0;0;0.5;0;0;0" keyTimes="0;0.14;0.15;0.25;0.26;1" dur="6s" repeatCount="indefinite"/>
</circle>
<circle cx="140" cy="55" r="0" fill="url(#shockU)" opacity="0">
<animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.29;0.3;0.4;0.41;1" dur="6s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0;0;0.5;0;0;0" keyTimes="0;0.29;0.3;0.4;0.41;1" dur="6s" repeatCount="indefinite"/>
</circle>
<circle cx="57" cy="141" r="0" fill="url(#shockC)" opacity="0">
<animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.44;0.45;0.55;0.56;1" dur="6s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0;0;0.5;0;0;0" keyTimes="0;0.44;0.45;0.55;0.56;1" dur="6s" repeatCount="indefinite"/>
</circle>
<circle cx="140" cy="141" r="0" fill="url(#shockH)" opacity="0">
<animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.59;0.6;0.7;0.71;1" dur="6s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0;0;0.5;0;0;0" keyTimes="0;0.59;0.6;0.7;0.71;1" dur="6s" repeatCount="indefinite"/>
</circle>
<!-- Electrified circuit trace: multiple overlapping animated strokes -->
<use href="#trace" fill="none" stroke="#45c99e" stroke-width="2" opacity="0.25"
stroke-linecap="round" stroke-linejoin="round"/>
<!-- Fast pulse 1 -->
<use href="#trace" fill="none" stroke="#7ddfbe" stroke-width="3" opacity="0.8"
stroke-linecap="round" filter="url(#megaGlow)"
stroke-dasharray="15 583">
<animate attributeName="stroke-dashoffset" from="0" to="-598" dur="1.5s" repeatCount="indefinite"/>
</use>
<!-- Fast pulse 2 (opposite direction feel - offset) -->
<use href="#trace" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.5"
stroke-linecap="round"
stroke-dasharray="5 593">
<animate attributeName="stroke-dashoffset" from="-200" to="-798" dur="1.5s" repeatCount="indefinite"/>
</use>
<!-- Crackle: erratic short dashes -->
<use href="#trace" fill="none" stroke="#45c99e" stroke-width="4" opacity="0.3"
stroke-linecap="round" filter="url(#glow)"
stroke-dasharray="3 40 8 60 2 80 5 400">
<animate attributeName="stroke-dashoffset" from="0" to="-598" dur="2.3s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.3;0.6;0.1;0.5;0.2;0.3" dur="0.7s" repeatCount="indefinite"/>
</use>
<!-- Nodes: pulsing orbs with halos -->
<g filter="url(#megaGlow)">
<circle cx="20" cy="28" r="2.5" fill="#45c99e">
<animate attributeName="r" values="2;5;2" dur="1.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/>
</circle>
<circle cx="100" cy="100" r="3" fill="#ffffff">
<animate attributeName="r" values="3;7;3" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2s" repeatCount="indefinite"/>
<animate attributeName="fill" values="#45c99e;#e8689e;#4aade0;#45c99e" dur="4s" repeatCount="indefinite"/>
</circle>
<circle cx="166" cy="172" r="2.5" fill="#45c99e">
<animate attributeName="r" values="2;5;2" dur="1.5s" begin="0.75s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" begin="0.75s" repeatCount="indefinite"/>
</circle>
<!-- Corner nodes -->
<circle cx="178" cy="34" r="2" fill="#e8689e">
<animate attributeName="r" values="2;4;2" dur="1.8s" begin="0.3s" repeatCount="indefinite"/>
</circle>
<circle cx="172" cy="100" r="2" fill="#4aade0">
<animate attributeName="r" values="2;4;2" dur="1.8s" begin="0.6s" repeatCount="indefinite"/>
</circle>
<circle cx="28" cy="100" r="2" fill="#e8689e">
<animate attributeName="r" values="2;4;2" dur="1.8s" begin="0.9s" repeatCount="indefinite"/>
</circle>
<circle cx="22" cy="166" r="2" fill="#4aade0">
<animate attributeName="r" values="2;4;2" dur="1.8s" begin="1.2s" repeatCount="indefinite"/>
</circle>
</g>
<!-- Color-shifting animated border -->
<rect x="14" y="14" width="172" height="172" rx="16" fill="none"
stroke="url(#shiftGrad)" stroke-width="3.5" filter="url(#glow)">
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
</rect>
<!-- S slams in with scale -->
<g transform-origin="57 59">
<animateTransform attributeName="transform" type="scale"
values="0;0;1.15;1;1;1;0" keyTimes="0;0.14;0.17;0.2;0.85;0.95;1"
dur="6s" repeatCount="indefinite"/>
<path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
fill="none" stroke="#35925c" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
</g>
<!-- U slams in -->
<g transform-origin="140 55">
<animateTransform attributeName="transform" type="scale"
values="0;0;1.15;1;1;1;0" keyTimes="0;0.29;0.32;0.35;0.85;0.95;1"
dur="6s" repeatCount="indefinite"/>
<path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
fill="none" stroke="#e8689e" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
</g>
<!-- C slams in -->
<g transform-origin="57 141">
<animateTransform attributeName="transform" type="scale"
values="0;0;1.15;1;1;1;0" keyTimes="0;0.44;0.47;0.5;0.85;0.95;1"
dur="6s" repeatCount="indefinite"/>
<path d="M 78,118 H 36 V 164 H 78"
fill="none" stroke="#4aade0" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
</g>
<!-- H slams in -->
<g transform-origin="140 141">
<animateTransform attributeName="transform" type="scale"
values="0;0;1.15;1;1;1;0" keyTimes="0;0.59;0.62;0.65;0.85;0.95;1"
dur="6s" repeatCount="indefinite"/>
<path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
fill="none" stroke="#45c99e" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
</g>
<!-- Final flash on complete -->
<rect width="200" height="200" rx="26" fill="#ffffff" opacity="0">
<animate attributeName="opacity" values="0;0;0.15;0;0;0" keyTimes="0;0.64;0.66;0.72;0.95;1" dur="6s" repeatCount="indefinite"/>
</rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

apps/web/public/images/animations/anim3_matrix_light.svg
+205
View File
@@ -0,0 +1,205 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="1.5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="megaGlow">
<feGaussianBlur stdDeviation="5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="warpGlow">
<feGaussianBlur stdDeviation="8" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<path id="trace" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 52"/>
<!-- Animated gradient for border -->
<linearGradient id="shiftGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%">
<animate attributeName="stop-color" values="#1e6e45;#c44e7a;#2e85b8;#1a7a5a;#1e6e45" dur="4s" repeatCount="indefinite"/>
</stop>
<stop offset="50%">
<animate attributeName="stop-color" values="#2e85b8;#1a7a5a;#c44e7a;#1e6e45;#2e85b8" dur="4s" repeatCount="indefinite"/>
</stop>
<stop offset="100%">
<animate attributeName="stop-color" values="#c44e7a;#2e85b8;#1e6e45;#c44e7a;#c44e7a" dur="4s" repeatCount="indefinite"/>
</stop>
</linearGradient>
<!-- Radial pulse for shockwaves -->
<radialGradient id="shockS" cx="57" cy="59" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#1e6e45" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#1e6e45" stop-opacity="0"/>
</radialGradient>
<radialGradient id="shockU" cx="140" cy="55" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#c44e7a" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#c44e7a" stop-opacity="0"/>
</radialGradient>
<radialGradient id="shockC" cx="57" cy="141" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#2e85b8" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#2e85b8" stop-opacity="0"/>
</radialGradient>
<radialGradient id="shockH" cx="140" cy="141" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#1a7a5a" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#1a7a5a" stop-opacity="0"/>
</radialGradient>
<clipPath id="roundClip">
<rect width="200" height="200" rx="26"/>
</clipPath>
</defs>
<!-- Background -->
<rect width="200" height="200" rx="26" fill="#f5f5f5"/>
<!-- Matrix rain columns (clipped to rounded rect) -->
<g clip-path="url(#roundClip)" opacity="0.1" font-family="'SF Mono','Fira Code',monospace" font-size="10" fill="#1a7a5a">
<text x="10" y="0"><animate attributeName="y" from="-20" to="220" dur="2.1s" repeatCount="indefinite"/>01</text>
<text x="25" y="0"><animate attributeName="y" from="-60" to="220" dur="1.8s" repeatCount="indefinite"/>{ }</text>
<text x="42" y="0"><animate attributeName="y" from="-40" to="220" dur="2.5s" repeatCount="indefinite"/>S</text>
<text x="58" y="0"><animate attributeName="y" from="-80" to="220" dur="1.6s" repeatCount="indefinite"/>10</text>
<text x="74" y="0"><animate attributeName="y" from="-10" to="220" dur="2.8s" repeatCount="indefinite"/>U</text>
<text x="90" y="0"><animate attributeName="y" from="-50" to="220" dur="2.0s" repeatCount="indefinite"/>0x</text>
<text x="106" y="0"><animate attributeName="y" from="-90" to="220" dur="1.7s" repeatCount="indefinite"/>C</text>
<text x="122" y="0"><animate attributeName="y" from="-30" to="220" dur="2.3s" repeatCount="indefinite"/>fn</text>
<text x="138" y="0"><animate attributeName="y" from="-70" to="220" dur="1.9s" repeatCount="indefinite"/>H</text>
<text x="154" y="0"><animate attributeName="y" from="-15" to="220" dur="2.6s" repeatCount="indefinite"/>;</text>
<text x="170" y="0"><animate attributeName="y" from="-55" to="220" dur="2.2s" repeatCount="indefinite"/>=></text>
<text x="185" y="0"><animate attributeName="y" from="-35" to="220" dur="1.5s" repeatCount="indefinite"/>[]</text>
</g>
<!-- Shockwave rings when letters appear -->
<circle cx="57" cy="59" r="0" fill="url(#shockS)" opacity="0">
<animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.14;0.15;0.25;0.26;1" dur="6s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0;0;0.4;0;0;0" keyTimes="0;0.14;0.15;0.25;0.26;1" dur="6s" repeatCount="indefinite"/>
</circle>
<circle cx="140" cy="55" r="0" fill="url(#shockU)" opacity="0">
<animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.29;0.3;0.4;0.41;1" dur="6s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0;0;0.4;0;0;0" keyTimes="0;0.29;0.3;0.4;0.41;1" dur="6s" repeatCount="indefinite"/>
</circle>
<circle cx="57" cy="141" r="0" fill="url(#shockC)" opacity="0">
<animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.44;0.45;0.55;0.56;1" dur="6s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0;0;0.4;0;0;0" keyTimes="0;0.44;0.45;0.55;0.56;1" dur="6s" repeatCount="indefinite"/>
</circle>
<circle cx="140" cy="141" r="0" fill="url(#shockH)" opacity="0">
<animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.59;0.6;0.7;0.71;1" dur="6s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0;0;0.4;0;0;0" keyTimes="0;0.59;0.6;0.7;0.71;1" dur="6s" repeatCount="indefinite"/>
</circle>
<!-- Electrified circuit trace -->
<use href="#trace" fill="none" stroke="#1a7a5a" stroke-width="2" opacity="0.2"
stroke-linecap="round" stroke-linejoin="round"/>
<!-- Fast pulse 1 -->
<use href="#trace" fill="none" stroke="#2a9a6a" stroke-width="3" opacity="0.6"
stroke-linecap="round" filter="url(#megaGlow)"
stroke-dasharray="15 583">
<animate attributeName="stroke-dashoffset" from="0" to="-598" dur="1.5s" repeatCount="indefinite"/>
</use>
<!-- Fast pulse 2 -->
<use href="#trace" fill="none" stroke="#333333" stroke-width="1.5" opacity="0.35"
stroke-linecap="round"
stroke-dasharray="5 593">
<animate attributeName="stroke-dashoffset" from="-200" to="-798" dur="1.5s" repeatCount="indefinite"/>
</use>
<!-- Crackle -->
<use href="#trace" fill="none" stroke="#1a7a5a" stroke-width="4" opacity="0.2"
stroke-linecap="round" filter="url(#glow)"
stroke-dasharray="3 40 8 60 2 80 5 400">
<animate attributeName="stroke-dashoffset" from="0" to="-598" dur="2.3s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.2;0.4;0.08;0.35;0.15;0.2" dur="0.7s" repeatCount="indefinite"/>
</use>
<!-- Nodes: pulsing orbs -->
<g filter="url(#megaGlow)">
<circle cx="20" cy="28" r="2.5" fill="#1a7a5a">
<animate attributeName="r" values="2;5;2" dur="1.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/>
</circle>
<circle cx="100" cy="100" r="3" fill="#666666">
<animate attributeName="r" values="3;7;3" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.2;0.6;0.2" dur="2s" repeatCount="indefinite"/>
<animate attributeName="fill" values="#1a7a5a;#c44e7a;#2e85b8;#1a7a5a" dur="4s" repeatCount="indefinite"/>
</circle>
<circle cx="166" cy="172" r="2.5" fill="#1a7a5a">
<animate attributeName="r" values="2;5;2" dur="1.5s" begin="0.75s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" begin="0.75s" repeatCount="indefinite"/>
</circle>
<!-- Corner nodes -->
<circle cx="178" cy="34" r="2" fill="#c44e7a">
<animate attributeName="r" values="2;4;2" dur="1.8s" begin="0.3s" repeatCount="indefinite"/>
</circle>
<circle cx="172" cy="100" r="2" fill="#2e85b8">
<animate attributeName="r" values="2;4;2" dur="1.8s" begin="0.6s" repeatCount="indefinite"/>
</circle>
<circle cx="28" cy="100" r="2" fill="#c44e7a">
<animate attributeName="r" values="2;4;2" dur="1.8s" begin="0.9s" repeatCount="indefinite"/>
</circle>
<circle cx="22" cy="166" r="2" fill="#2e85b8">
<animate attributeName="r" values="2;4;2" dur="1.8s" begin="1.2s" repeatCount="indefinite"/>
</circle>
</g>
<!-- Color-shifting animated border -->
<rect x="14" y="14" width="172" height="172" rx="16" fill="none"
stroke="url(#shiftGrad)" stroke-width="3.5" filter="url(#glow)">
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="2s" repeatCount="indefinite"/>
</rect>
<!-- S slams in with scale -->
<g transform-origin="57 59">
<animateTransform attributeName="transform" type="scale"
values="0;0;1.15;1;1;1;0" keyTimes="0;0.14;0.17;0.2;0.85;0.95;1"
dur="6s" repeatCount="indefinite"/>
<path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
fill="none" stroke="#1e6e45" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
</g>
<!-- U slams in -->
<g transform-origin="140 55">
<animateTransform attributeName="transform" type="scale"
values="0;0;1.15;1;1;1;0" keyTimes="0;0.29;0.32;0.35;0.85;0.95;1"
dur="6s" repeatCount="indefinite"/>
<path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
fill="none" stroke="#c44e7a" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
</g>
<!-- C slams in -->
<g transform-origin="57 141">
<animateTransform attributeName="transform" type="scale"
values="0;0;1.15;1;1;1;0" keyTimes="0;0.44;0.47;0.5;0.85;0.95;1"
dur="6s" repeatCount="indefinite"/>
<path d="M 78,118 H 36 V 164 H 78"
fill="none" stroke="#2e85b8" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
</g>
<!-- H slams in -->
<g transform-origin="140 141">
<animateTransform attributeName="transform" type="scale"
values="0;0;1.15;1;1;1;0" keyTimes="0;0.59;0.62;0.65;0.85;0.95;1"
dur="6s" repeatCount="indefinite"/>
<path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
fill="none" stroke="#1a7a5a" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
</g>
<!-- Final flash on complete -->
<rect width="200" height="200" rx="26" fill="#1a7a5a" opacity="0">
<animate attributeName="opacity" values="0;0;0.08;0;0;0" keyTimes="0;0.64;0.66;0.72;0.95;1" dur="6s" repeatCount="indefinite"/>
</rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

apps/web/public/images/animations/anim_type_v4.svg
+125
View File
@@ -0,0 +1,125 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="1.2" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="bigGlow">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<pattern id="scan" patternUnits="userSpaceOnUse" width="200" height="4">
<rect width="200" height="1.5" fill="#ffffff" opacity="0.012"/>
</pattern>
<clipPath id="roundClip"><rect width="200" height="200" rx="26"/></clipPath>
</defs>
<!-- Background -->
<rect width="200" height="200" rx="26" fill="#08090c"/>
<rect width="200" height="200" rx="26" fill="url(#scan)"/>
<!-- Border -->
<rect x="14" y="14" width="172" height="172" rx="16" fill="none"
stroke="#45c99e" stroke-width="3" filter="url(#glow)" opacity="0.6"/>
<!-- Command prompt text: "> such_" typed out -->
<g clip-path="url(#roundClip)">
<!-- Prompt caret ">" always visible during typing phase -->
<text x="30" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
font-size="26" font-weight="bold" fill="#45c99e" opacity="0">
<animate attributeName="opacity" values="0;0;0.5;0.5;0;0"
keyTimes="0;0.04;0.05;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
>
</text>
<!-- "s" -->
<text x="52" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
font-size="26" font-weight="bold" fill="#35925c" opacity="0">
<animate attributeName="opacity" values="0;0;0.8;0.8;0;0"
keyTimes="0;0.07;0.08;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
s
</text>
<!-- "u" -->
<text x="68" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
font-size="26" font-weight="bold" fill="#e8689e" opacity="0">
<animate attributeName="opacity" values="0;0;0.8;0.8;0;0"
keyTimes="0;0.12;0.13;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
u
</text>
<!-- "c" -->
<text x="84" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
font-size="26" font-weight="bold" fill="#4aade0" opacity="0">
<animate attributeName="opacity" values="0;0;0.8;0.8;0;0"
keyTimes="0;0.17;0.18;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
c
</text>
<!-- "h" -->
<text x="100" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
font-size="26" font-weight="bold" fill="#45c99e" opacity="0">
<animate attributeName="opacity" values="0;0;0.8;0.8;0;0"
keyTimes="0;0.22;0.23;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
h
</text>
<!-- Blinking cursor for the command line -->
<rect x="116" y="90" width="13" height="22" rx="2" fill="#e8689e">
<animate attributeName="opacity" values="0;0;0.8;0;0.8;0;0.8;0;0.8;0;0"
keyTimes="0;0.06;0.07;0.1;0.11;0.15;0.16;0.2;0.21;0.35;0.38"
dur="6s" repeatCount="indefinite"/>
<!-- Cursor follows text as it types -->
<animate attributeName="x"
values="52;52;68;68;84;84;100;100;116;116"
keyTimes="0;0.07;0.08;0.12;0.13;0.17;0.18;0.22;0.23;1"
dur="6s" repeatCount="indefinite"/>
</rect>
</g>
<!-- After typing, text fades and letters EXPAND into position -->
<!-- S materializes -->
<path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
fill="none" stroke="#35925c" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
opacity="0">
<animate attributeName="opacity" values="0;0;1;1;0"
keyTimes="0;0.38;0.45;0.88;0.96" dur="6s" repeatCount="indefinite"/>
</path>
<!-- U materializes -->
<path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
fill="none" stroke="#e8689e" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
opacity="0">
<animate attributeName="opacity" values="0;0;1;1;0"
keyTimes="0;0.42;0.49;0.88;0.96" dur="6s" repeatCount="indefinite"/>
</path>
<!-- C materializes -->
<path d="M 78,118 H 36 V 164 H 78"
fill="none" stroke="#4aade0" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
opacity="0">
<animate attributeName="opacity" values="0;0;1;1;0"
keyTimes="0;0.46;0.53;0.88;0.96" dur="6s" repeatCount="indefinite"/>
</path>
<!-- H materializes -->
<path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
fill="none" stroke="#45c99e" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
opacity="0">
<animate attributeName="opacity" values="0;0;1;1;0"
keyTimes="0;0.5;0.57;0.88;0.96" dur="6s" repeatCount="indefinite"/>
</path>
<!-- Flash when letters appear -->
<rect width="200" height="200" rx="26" fill="#45c99e" opacity="0">
<animate attributeName="opacity" values="0;0;0.08;0;0"
keyTimes="0;0.37;0.39;0.44;1" dur="6s" repeatCount="indefinite"/>
</rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

apps/web/public/images/animations/anim_type_v4_light.svg
+125
View File
@@ -0,0 +1,125 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="1.2" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="bigGlow">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<pattern id="scan" patternUnits="userSpaceOnUse" width="200" height="4">
<rect width="200" height="1.5" fill="#000000" opacity="0.015"/>
</pattern>
<clipPath id="roundClip"><rect width="200" height="200" rx="26"/></clipPath>
</defs>
<!-- Background -->
<rect width="200" height="200" rx="26" fill="#f5f5f5"/>
<rect width="200" height="200" rx="26" fill="url(#scan)"/>
<!-- Border -->
<rect x="14" y="14" width="172" height="172" rx="16" fill="none"
stroke="#1a7a5a" stroke-width="3" filter="url(#glow)" opacity="0.4"/>
<!-- Command prompt text: "> such_" typed out -->
<g clip-path="url(#roundClip)">
<!-- Prompt caret ">" always visible during typing phase -->
<text x="30" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
font-size="26" font-weight="bold" fill="#1a7a5a" opacity="0">
<animate attributeName="opacity" values="0;0;0.5;0.5;0;0"
keyTimes="0;0.04;0.05;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
>
</text>
<!-- "s" -->
<text x="52" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
font-size="26" font-weight="bold" fill="#1e6e45" opacity="0">
<animate attributeName="opacity" values="0;0;0.8;0.8;0;0"
keyTimes="0;0.07;0.08;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
s
</text>
<!-- "u" -->
<text x="68" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
font-size="26" font-weight="bold" fill="#c44e7a" opacity="0">
<animate attributeName="opacity" values="0;0;0.8;0.8;0;0"
keyTimes="0;0.12;0.13;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
u
</text>
<!-- "c" -->
<text x="84" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
font-size="26" font-weight="bold" fill="#2e85b8" opacity="0">
<animate attributeName="opacity" values="0;0;0.8;0.8;0;0"
keyTimes="0;0.17;0.18;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
c
</text>
<!-- "h" -->
<text x="100" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
font-size="26" font-weight="bold" fill="#1a7a5a" opacity="0">
<animate attributeName="opacity" values="0;0;0.8;0.8;0;0"
keyTimes="0;0.22;0.23;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
h
</text>
<!-- Blinking cursor for the command line -->
<rect x="116" y="90" width="13" height="22" rx="2" fill="#c44e7a">
<animate attributeName="opacity" values="0;0;0.8;0;0.8;0;0.8;0;0.8;0;0"
keyTimes="0;0.06;0.07;0.1;0.11;0.15;0.16;0.2;0.21;0.35;0.38"
dur="6s" repeatCount="indefinite"/>
<!-- Cursor follows text as it types -->
<animate attributeName="x"
values="52;52;68;68;84;84;100;100;116;116"
keyTimes="0;0.07;0.08;0.12;0.13;0.17;0.18;0.22;0.23;1"
dur="6s" repeatCount="indefinite"/>
</rect>
</g>
<!-- After typing, text fades and letters EXPAND into position -->
<!-- S materializes -->
<path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
fill="none" stroke="#1e6e45" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
opacity="0">
<animate attributeName="opacity" values="0;0;1;1;0"
keyTimes="0;0.38;0.45;0.88;0.96" dur="6s" repeatCount="indefinite"/>
</path>
<!-- U materializes -->
<path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
fill="none" stroke="#c44e7a" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
opacity="0">
<animate attributeName="opacity" values="0;0;1;1;0"
keyTimes="0;0.42;0.49;0.88;0.96" dur="6s" repeatCount="indefinite"/>
</path>
<!-- C materializes -->
<path d="M 78,118 H 36 V 164 H 78"
fill="none" stroke="#2e85b8" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
opacity="0">
<animate attributeName="opacity" values="0;0;1;1;0"
keyTimes="0;0.46;0.53;0.88;0.96" dur="6s" repeatCount="indefinite"/>
</path>
<!-- H materializes -->
<path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
fill="none" stroke="#1a7a5a" stroke-width="14"
stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
opacity="0">
<animate attributeName="opacity" values="0;0;1;1;0"
keyTimes="0;0.5;0.57;0.88;0.96" dur="6s" repeatCount="indefinite"/>
</path>
<!-- Flash when letters appear -->
<rect width="200" height="200" rx="26" fill="#1a7a5a" opacity="0">
<animate attributeName="opacity" values="0;0;0.05;0;0"
keyTimes="0;0.37;0.39;0.44;1" dur="6s" repeatCount="indefinite"/>
</rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB