mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
Merge feat/brand-refresh-v3: pack-generated brand, one voice, brand gradients
This commit is contained in:
jwinterm
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<style>
|
||||
.e0 { offset-path: path("M 14,100 C 14,82 52,68 100,68 C 148,68 186,82 186,100 C 186,118 148,132 100,132 C 52,132 14,118 14,100 Z"); animation: sg-orbit 26s linear infinite; animation-delay: -0s; }
|
||||
.e1 { offset-path: path("M 14,100 C 14,82 52,68 100,68 C 148,68 186,82 186,100 C 186,118 148,132 100,132 C 52,132 14,118 14,100 Z"); animation: sg-orbit 34s linear infinite; animation-delay: -14.28s; }
|
||||
.e2 { offset-path: path("M 14,100 C 14,82 52,68 100,68 C 148,68 186,82 186,100 C 186,118 148,132 100,132 C 52,132 14,118 14,100 Z"); animation: sg-orbit 44s linear infinite; animation-delay: -33.88s; }
|
||||
@keyframes sg-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
|
||||
@media (prefers-reduced-motion: reduce) { .el { animation: none; } }
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#0a0a0a"/>
|
||||
<g opacity="0.18">
|
||||
<ellipse cx="100" cy="100" rx="86" ry="32" fill="none" stroke="#45c99e" stroke-width="1.4" transform="rotate(0 100 100)"/>
|
||||
<ellipse cx="100" cy="100" rx="86" ry="32" fill="none" stroke="#45c99e" stroke-width="1.4" transform="rotate(60 100 100)"/>
|
||||
<ellipse cx="100" cy="100" rx="86" ry="32" fill="none" stroke="#45c99e" stroke-width="1.4" transform="rotate(120 100 100)"/>
|
||||
<circle cx="100" cy="100" r="4.5" fill="#45c99e"/>
|
||||
<g transform="rotate(0 100 100)"><circle class="el e0" r="3.2" fill="#35925c"/></g>
|
||||
<g transform="rotate(60 100 100)"><circle class="el e1" r="3.2" fill="#e8689e"/></g>
|
||||
<g transform="rotate(120 100 100)"><circle class="el e2" r="3.2" fill="#4aade0"/></g>
|
||||
</g>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#45c99e" stroke-width="3.5" opacity="0.7"/>
|
||||
<path class="g g-s" 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" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#e8689e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#4aade0" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#3ad4c6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<style>
|
||||
.e0 { offset-path: path("M 14,100 C 14,82 52,68 100,68 C 148,68 186,82 186,100 C 186,118 148,132 100,132 C 52,132 14,118 14,100 Z"); animation: sg-orbit 26s linear infinite; animation-delay: -0s; }
|
||||
.e1 { offset-path: path("M 14,100 C 14,82 52,68 100,68 C 148,68 186,82 186,100 C 186,118 148,132 100,132 C 52,132 14,118 14,100 Z"); animation: sg-orbit 34s linear infinite; animation-delay: -14.28s; }
|
||||
.e2 { offset-path: path("M 14,100 C 14,82 52,68 100,68 C 148,68 186,82 186,100 C 186,118 148,132 100,132 C 52,132 14,118 14,100 Z"); animation: sg-orbit 44s linear infinite; animation-delay: -33.88s; }
|
||||
@keyframes sg-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
|
||||
@media (prefers-reduced-motion: reduce) { .el { animation: none; } }
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#f7f8fa"/>
|
||||
<g opacity="0.13">
|
||||
<ellipse cx="100" cy="100" rx="86" ry="32" fill="none" stroke="#1a5c38" stroke-width="1.4" transform="rotate(0 100 100)"/>
|
||||
<ellipse cx="100" cy="100" rx="86" ry="32" fill="none" stroke="#1a5c38" stroke-width="1.4" transform="rotate(60 100 100)"/>
|
||||
<ellipse cx="100" cy="100" rx="86" ry="32" fill="none" stroke="#1a5c38" stroke-width="1.4" transform="rotate(120 100 100)"/>
|
||||
<circle cx="100" cy="100" r="4.5" fill="#1a5c38"/>
|
||||
<g transform="rotate(0 100 100)"><circle class="el e0" r="3.2" fill="#1a5c38"/></g>
|
||||
<g transform="rotate(60 100 100)"><circle class="el e1" r="3.2" fill="#b83670"/></g>
|
||||
<g transform="rotate(120 100 100)"><circle class="el e2" r="3.2" fill="#176a92"/></g>
|
||||
</g>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#1a5c38" stroke-width="3.5" opacity="0.45"/>
|
||||
<path class="g g-s" d="M 78,36 H 36 V 58 H 78 V 82 H 36" fill="none" stroke="#1a5c38" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#b83670" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#176a92" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#12857e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,22 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<style>
|
||||
.blade { stroke-dasharray: 333.6; stroke-dashoffset: 333.6; animation: sg-leaf 3.71s ease-out forwards; animation-delay: 0s; }
|
||||
.rib { stroke-dasharray: 128.9; stroke-dashoffset: 128.9; animation: sg-leaf 1.43s ease-out forwards; animation-delay: 2.67s; }
|
||||
.vein1 { stroke-dasharray: 43.44; stroke-dashoffset: 43.44; animation: sg-leaf 0.483s ease-out forwards; animation-delay: 3.7s; }
|
||||
.vein2 { stroke-dasharray: 39.18; stroke-dashoffset: 39.18; animation: sg-leaf 0.435s ease-out forwards; animation-delay: 4.05s; }
|
||||
@keyframes sg-leaf { to { stroke-dashoffset: 0; } }
|
||||
@media (prefers-reduced-motion: reduce) { .lf { animation: none; stroke-dashoffset: 0; } }
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#0a0a0a"/>
|
||||
<g opacity="0.2" transform="rotate(-14 100 100)">
|
||||
<path class="lf blade" d="M 100,166 C 64,148 52,108 64,68 C 72,46 88,32 112,26 C 134,58 138,104 122,136 C 114,152 108,160 100,166 Z" fill="none" stroke="#35925c" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="lf rib" d="M 100,162 C 96,128 96,92 108,34" fill="none" stroke="#35925c" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="lf vein1" d="M 98,120 C 84,112 74,100 70,88" fill="none" stroke="#35925c" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="lf vein2" d="M 100,90 C 112,84 122,74 126,62" fill="none" stroke="#35925c" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#45c99e" stroke-width="3.5" opacity="0.7"/>
|
||||
<path class="g g-s" 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" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#e8689e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#4aade0" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#3ad4c6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1,22 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<style>
|
||||
.blade { stroke-dasharray: 333.6; stroke-dashoffset: 333.6; animation: sg-leaf 3.71s ease-out forwards; animation-delay: 0s; }
|
||||
.rib { stroke-dasharray: 128.9; stroke-dashoffset: 128.9; animation: sg-leaf 1.43s ease-out forwards; animation-delay: 2.67s; }
|
||||
.vein1 { stroke-dasharray: 43.44; stroke-dashoffset: 43.44; animation: sg-leaf 0.483s ease-out forwards; animation-delay: 3.7s; }
|
||||
.vein2 { stroke-dasharray: 39.18; stroke-dashoffset: 39.18; animation: sg-leaf 0.435s ease-out forwards; animation-delay: 4.05s; }
|
||||
@keyframes sg-leaf { to { stroke-dashoffset: 0; } }
|
||||
@media (prefers-reduced-motion: reduce) { .lf { animation: none; stroke-dashoffset: 0; } }
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#f7f8fa"/>
|
||||
<g opacity="0.15" transform="rotate(-14 100 100)">
|
||||
<path class="lf blade" d="M 100,166 C 64,148 52,108 64,68 C 72,46 88,32 112,26 C 134,58 138,104 122,136 C 114,152 108,160 100,166 Z" fill="none" stroke="#1a5c38" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="lf rib" d="M 100,162 C 96,128 96,92 108,34" fill="none" stroke="#1a5c38" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="lf vein1" d="M 98,120 C 84,112 74,100 70,88" fill="none" stroke="#1a5c38" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="lf vein2" d="M 100,90 C 112,84 122,74 126,62" fill="none" stroke="#1a5c38" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#1a5c38" stroke-width="3.5" opacity="0.45"/>
|
||||
<path class="g g-s" d="M 78,36 H 36 V 58 H 78 V 82 H 36" fill="none" stroke="#1a5c38" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#b83670" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#176a92" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#12857e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1,65 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<style>
|
||||
.k0 { offset-path: path("M 26,30 L 84,20"); animation: sg-pkt 3.4s ease-in-out infinite; animation-delay: 0s; }
|
||||
.k1 { offset-path: path("M 84,20 L 176,34"); animation: sg-pkt 4.3s ease-in-out infinite; animation-delay: 2.6s; }
|
||||
.k2 { offset-path: path("M 26,30 L 20,92"); animation: sg-pkt 5.2s ease-in-out infinite; animation-delay: 1.8s; }
|
||||
.k3 { offset-path: path("M 176,34 L 180,88"); animation: sg-pkt 6.1s ease-in-out infinite; animation-delay: 1s; }
|
||||
.k4 { offset-path: path("M 20,92 L 106,106"); animation: sg-pkt 7s ease-in-out infinite; animation-delay: 0.2s; }
|
||||
.k5 { offset-path: path("M 106,106 L 180,88"); animation: sg-pkt 4.1s ease-in-out infinite; animation-delay: 3.8s; }
|
||||
.k6 { offset-path: path("M 20,92 L 32,176"); animation: sg-pkt 5s ease-in-out infinite; animation-delay: 4.8s; }
|
||||
.k7 { offset-path: path("M 180,88 L 172,180"); animation: sg-pkt 5.9s ease-in-out infinite; animation-delay: 5.8s; }
|
||||
.k8 { offset-path: path("M 32,176 L 110,170"); animation: sg-pkt 6.8s ease-in-out infinite; animation-delay: 1.78e-15s; }
|
||||
.k9 { offset-path: path("M 110,170 L 172,180"); animation: sg-pkt 3.9s ease-in-out infinite; animation-delay: 0.3s; }
|
||||
.k10 { offset-path: path("M 84,20 L 106,106"); animation: sg-pkt 4.8s ease-in-out infinite; animation-delay: 2.2s; }
|
||||
.k11 { offset-path: path("M 106,106 L 110,170"); animation: sg-pkt 5.7s ease-in-out infinite; animation-delay: 4.1s; }
|
||||
.k12 { offset-path: path("M 26,30 L 106,106"); animation: sg-pkt 6.6s ease-in-out infinite; animation-delay: 6s; }
|
||||
.k13 { offset-path: path("M 106,106 L 172,180"); animation: sg-pkt 3.7s ease-in-out infinite; animation-delay: 0.1s; }
|
||||
@keyframes sg-pkt { from { offset-distance: 0%; } to { offset-distance: 100%; } }
|
||||
@media (prefers-reduced-motion: reduce) { .pk { display: none; } }
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#0a0a0a"/>
|
||||
<g opacity="0.26">
|
||||
<line x1="26" y1="30" x2="84" y2="20" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="84" y1="20" x2="176" y2="34" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="26" y1="30" x2="20" y2="92" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="176" y1="34" x2="180" y2="88" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="20" y1="92" x2="106" y2="106" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="106" y1="106" x2="180" y2="88" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="20" y1="92" x2="32" y2="176" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="180" y1="88" x2="172" y2="180" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="32" y1="176" x2="110" y2="170" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="110" y1="170" x2="172" y2="180" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="84" y1="20" x2="106" y2="106" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="106" y1="106" x2="110" y2="170" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="26" y1="30" x2="106" y2="106" stroke="#45c99e" stroke-width="1"/>
|
||||
<line x1="106" y1="106" x2="172" y2="180" stroke="#45c99e" stroke-width="1"/>
|
||||
<circle cx="26" cy="30" r="2.4" fill="#45c99e"/>
|
||||
<circle cx="84" cy="20" r="2.4" fill="#45c99e"/>
|
||||
<circle cx="176" cy="34" r="2.4" fill="#45c99e"/>
|
||||
<circle cx="20" cy="92" r="2.4" fill="#45c99e"/>
|
||||
<circle cx="106" cy="106" r="2.4" fill="#45c99e"/>
|
||||
<circle cx="180" cy="88" r="2.4" fill="#45c99e"/>
|
||||
<circle cx="32" cy="176" r="2.4" fill="#45c99e"/>
|
||||
<circle cx="110" cy="170" r="2.4" fill="#45c99e"/>
|
||||
<circle cx="172" cy="180" r="2.4" fill="#45c99e"/>
|
||||
<circle class="pk k0" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k1" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k2" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k3" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k4" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k5" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k6" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k7" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k8" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k9" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k10" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k11" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k12" r="1.8" fill="#e8689e"/>
|
||||
<circle class="pk k13" r="1.8" fill="#e8689e"/>
|
||||
</g>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#45c99e" stroke-width="3.5" opacity="0.7"/>
|
||||
<path class="g g-s" 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" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#e8689e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#4aade0" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#3ad4c6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
@@ -0,0 +1,65 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<style>
|
||||
.k0 { offset-path: path("M 26,30 L 84,20"); animation: sg-pkt 3.4s ease-in-out infinite; animation-delay: 0s; }
|
||||
.k1 { offset-path: path("M 84,20 L 176,34"); animation: sg-pkt 4.3s ease-in-out infinite; animation-delay: 2.6s; }
|
||||
.k2 { offset-path: path("M 26,30 L 20,92"); animation: sg-pkt 5.2s ease-in-out infinite; animation-delay: 1.8s; }
|
||||
.k3 { offset-path: path("M 176,34 L 180,88"); animation: sg-pkt 6.1s ease-in-out infinite; animation-delay: 1s; }
|
||||
.k4 { offset-path: path("M 20,92 L 106,106"); animation: sg-pkt 7s ease-in-out infinite; animation-delay: 0.2s; }
|
||||
.k5 { offset-path: path("M 106,106 L 180,88"); animation: sg-pkt 4.1s ease-in-out infinite; animation-delay: 3.8s; }
|
||||
.k6 { offset-path: path("M 20,92 L 32,176"); animation: sg-pkt 5s ease-in-out infinite; animation-delay: 4.8s; }
|
||||
.k7 { offset-path: path("M 180,88 L 172,180"); animation: sg-pkt 5.9s ease-in-out infinite; animation-delay: 5.8s; }
|
||||
.k8 { offset-path: path("M 32,176 L 110,170"); animation: sg-pkt 6.8s ease-in-out infinite; animation-delay: 1.78e-15s; }
|
||||
.k9 { offset-path: path("M 110,170 L 172,180"); animation: sg-pkt 3.9s ease-in-out infinite; animation-delay: 0.3s; }
|
||||
.k10 { offset-path: path("M 84,20 L 106,106"); animation: sg-pkt 4.8s ease-in-out infinite; animation-delay: 2.2s; }
|
||||
.k11 { offset-path: path("M 106,106 L 110,170"); animation: sg-pkt 5.7s ease-in-out infinite; animation-delay: 4.1s; }
|
||||
.k12 { offset-path: path("M 26,30 L 106,106"); animation: sg-pkt 6.6s ease-in-out infinite; animation-delay: 6s; }
|
||||
.k13 { offset-path: path("M 106,106 L 172,180"); animation: sg-pkt 3.7s ease-in-out infinite; animation-delay: 0.1s; }
|
||||
@keyframes sg-pkt { from { offset-distance: 0%; } to { offset-distance: 100%; } }
|
||||
@media (prefers-reduced-motion: reduce) { .pk { display: none; } }
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#f7f8fa"/>
|
||||
<g opacity="0.2">
|
||||
<line x1="26" y1="30" x2="84" y2="20" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="84" y1="20" x2="176" y2="34" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="26" y1="30" x2="20" y2="92" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="176" y1="34" x2="180" y2="88" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="20" y1="92" x2="106" y2="106" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="106" y1="106" x2="180" y2="88" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="20" y1="92" x2="32" y2="176" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="180" y1="88" x2="172" y2="180" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="32" y1="176" x2="110" y2="170" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="110" y1="170" x2="172" y2="180" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="84" y1="20" x2="106" y2="106" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="106" y1="106" x2="110" y2="170" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="26" y1="30" x2="106" y2="106" stroke="#1a5c38" stroke-width="1"/>
|
||||
<line x1="106" y1="106" x2="172" y2="180" stroke="#1a5c38" stroke-width="1"/>
|
||||
<circle cx="26" cy="30" r="2.4" fill="#1a5c38"/>
|
||||
<circle cx="84" cy="20" r="2.4" fill="#1a5c38"/>
|
||||
<circle cx="176" cy="34" r="2.4" fill="#1a5c38"/>
|
||||
<circle cx="20" cy="92" r="2.4" fill="#1a5c38"/>
|
||||
<circle cx="106" cy="106" r="2.4" fill="#1a5c38"/>
|
||||
<circle cx="180" cy="88" r="2.4" fill="#1a5c38"/>
|
||||
<circle cx="32" cy="176" r="2.4" fill="#1a5c38"/>
|
||||
<circle cx="110" cy="170" r="2.4" fill="#1a5c38"/>
|
||||
<circle cx="172" cy="180" r="2.4" fill="#1a5c38"/>
|
||||
<circle class="pk k0" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k1" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k2" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k3" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k4" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k5" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k6" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k7" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k8" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k9" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k10" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k11" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k12" r="1.8" fill="#b83670"/>
|
||||
<circle class="pk k13" r="1.8" fill="#b83670"/>
|
||||
</g>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#1a5c38" stroke-width="3.5" opacity="0.45"/>
|
||||
<path class="g g-s" d="M 78,36 H 36 V 58 H 78 V 82 H 36" fill="none" stroke="#1a5c38" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#b83670" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#176a92" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#12857e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
@@ -1,127 +1,48 @@
|
||||
<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 -->
|
||||
<defs><filter id="sg-pulse-glow"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
|
||||
<style>
|
||||
.pl0 { animation: sg-pl0 3s linear infinite; }
|
||||
@keyframes sg-pl0 { from { stroke-dashoffset: -0; } to { stroke-dashoffset: -603.9; } }
|
||||
.pl1 { animation: sg-pl1 3s linear infinite; }
|
||||
@keyframes sg-pl1 { from { stroke-dashoffset: -301.9; } to { stroke-dashoffset: -905.8; } }
|
||||
.pl2 { animation: sg-pl2 3s linear infinite; }
|
||||
@keyframes sg-pl2 { from { stroke-dashoffset: -100.8; } to { stroke-dashoffset: -704.7; } }
|
||||
.nd { transform-box: fill-box; transform-origin: center; opacity: 0.24;
|
||||
animation: sg-node 3s linear infinite; }
|
||||
@keyframes sg-node {
|
||||
0% { transform: scale(1); opacity: 0.24; }
|
||||
6% { transform: scale(1.8); opacity: 1; }
|
||||
34% { transform: scale(1); opacity: 0.24; }
|
||||
100% { transform: scale(1); opacity: 0.24; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.pl, .pt { display: none; }
|
||||
.nd { animation: none; }
|
||||
}
|
||||
</style>
|
||||
<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 class="field">
|
||||
<path 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 58" fill="none" stroke="#45c99e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.24"/>
|
||||
<path class="pl pl0" 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 58" fill="none" stroke="#45c99e" stroke-width="3" opacity="0.9" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-pulse-glow)" stroke-dasharray="30 573.9"/>
|
||||
<path class="pl pl1" 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 58" fill="none" stroke="#7ddfbe" stroke-width="2" opacity="0.6" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-pulse-glow)" stroke-dasharray="20 583.9"/>
|
||||
<path class="pl pl2" 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 58" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 595.9"/>
|
||||
<g class="nodes" filter="url(#sg-pulse-glow)">
|
||||
<g transform="translate(20,28)"><g class="nd" style="animation-delay:0s"><circle r="2.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(92,34)"><g class="nd" style="animation-delay:0.37s"><circle r="2" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(108,34)"><g class="nd" style="animation-delay:0.45s"><circle r="2" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(178,34)"><g class="nd" style="animation-delay:0.822s"><circle r="2.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(172,100)"><g class="nd" style="animation-delay:1.16s"><circle r="2.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(100,100)"><g class="nd" style="animation-delay:1.52s"><circle r="2.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(28,100)"><g class="nd" style="animation-delay:1.88s"><circle r="2.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(22,166)"><g class="nd" style="animation-delay:2.22s"><circle r="2.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(92,166)"><g class="nd" style="animation-delay:2.59s"><circle r="2" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(108,166)"><g class="nd" style="animation-delay:2.67s"><circle r="2" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(172,172)"><g class="nd" style="animation-delay:3s"><circle r="2.5" fill="#45c99e"/></g></g>
|
||||
</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"/>
|
||||
</g>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#45c99e" stroke-width="3.5" opacity="0.7"/>
|
||||
<path class="g g-s" 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" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#e8689e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#4aade0" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#3ad4c6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 4.6 KiB |
@@ -1,127 +1,48 @@
|
||||
<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>
|
||||
<defs><filter id="sg-pulse-glow"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
|
||||
<style>
|
||||
.pl0 { animation: sg-pl0 3s linear infinite; }
|
||||
@keyframes sg-pl0 { from { stroke-dashoffset: -0; } to { stroke-dashoffset: -603.9; } }
|
||||
.pl1 { animation: sg-pl1 3s linear infinite; }
|
||||
@keyframes sg-pl1 { from { stroke-dashoffset: -301.9; } to { stroke-dashoffset: -905.8; } }
|
||||
.pl2 { animation: sg-pl2 3s linear infinite; }
|
||||
@keyframes sg-pl2 { from { stroke-dashoffset: -100.8; } to { stroke-dashoffset: -704.7; } }
|
||||
.nd { transform-box: fill-box; transform-origin: center; opacity: 0.2;
|
||||
animation: sg-node 3s linear infinite; }
|
||||
@keyframes sg-node {
|
||||
0% { transform: scale(1); opacity: 0.2; }
|
||||
6% { transform: scale(1.8); opacity: 1; }
|
||||
34% { transform: scale(1); opacity: 0.2; }
|
||||
100% { transform: scale(1); opacity: 0.2; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.pl, .pt { display: none; }
|
||||
.nd { animation: none; }
|
||||
}
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#f7f8fa"/>
|
||||
<g class="field">
|
||||
<path 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 58" fill="none" stroke="#1a5c38" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.2"/>
|
||||
<path class="pl pl0" 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 58" fill="none" stroke="#1a5c38" stroke-width="3" opacity="0.9" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-pulse-glow)" stroke-dasharray="30 573.9"/>
|
||||
<path class="pl pl1" 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 58" fill="none" stroke="#2f8f5e" stroke-width="2" opacity="0.6" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-pulse-glow)" stroke-dasharray="20 583.9"/>
|
||||
<path class="pl pl2" 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 58" fill="none" stroke="#0a0a14" stroke-width="1.5" opacity="0.4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 595.9"/>
|
||||
<g class="nodes" filter="url(#sg-pulse-glow)">
|
||||
<g transform="translate(20,28)"><g class="nd" style="animation-delay:0s"><circle r="2.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(92,34)"><g class="nd" style="animation-delay:0.37s"><circle r="2" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(108,34)"><g class="nd" style="animation-delay:0.45s"><circle r="2" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(178,34)"><g class="nd" style="animation-delay:0.822s"><circle r="2.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(172,100)"><g class="nd" style="animation-delay:1.16s"><circle r="2.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(100,100)"><g class="nd" style="animation-delay:1.52s"><circle r="2.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(28,100)"><g class="nd" style="animation-delay:1.88s"><circle r="2.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(22,166)"><g class="nd" style="animation-delay:2.22s"><circle r="2.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(92,166)"><g class="nd" style="animation-delay:2.59s"><circle r="2" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(108,166)"><g class="nd" style="animation-delay:2.67s"><circle r="2" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(172,172)"><g class="nd" style="animation-delay:3s"><circle r="2.5" fill="#1a5c38"/></g></g>
|
||||
</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"/>
|
||||
</g>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#1a5c38" stroke-width="3.5" opacity="0.45"/>
|
||||
<path class="g g-s" d="M 78,36 H 36 V 58 H 78 V 82 H 36" fill="none" stroke="#1a5c38" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#b83670" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#176a92" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#12857e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 4.6 KiB |
@@ -1,205 +1,80 @@
|
||||
<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 -->
|
||||
<defs><filter id="sg-mglow" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="2.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter><clipPath id="sg-clip"><rect width="200" height="200" rx="26"/></clipPath><radialGradient id="sg-shock-s"><stop offset="0" stop-color="#35925c" stop-opacity="0.6"/><stop offset="1" stop-color="#35925c" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-u"><stop offset="0" stop-color="#e8689e" stop-opacity="0.6"/><stop offset="1" stop-color="#e8689e" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-c"><stop offset="0" stop-color="#4aade0" stop-opacity="0.6"/><stop offset="1" stop-color="#4aade0" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-h"><stop offset="0" stop-color="#3ad4c6" stop-opacity="0.6"/><stop offset="1" stop-color="#3ad4c6" stop-opacity="0"/></radialGradient></defs>
|
||||
<style>
|
||||
.rn { animation: sg-rain linear infinite; }
|
||||
@keyframes sg-rain { from { transform: translateY(-100px); } to { transform: translateY(320px); } }
|
||||
.rn0 { animation-duration: 2.1s; animation-delay: 0.73s; }
|
||||
.rn1 { animation-duration: 1.8s; animation-delay: 0.175s; }
|
||||
.rn2 { animation-duration: 2.5s; animation-delay: 1.75s; }
|
||||
.rn3 { animation-duration: 1.6s; animation-delay: 0.054s; }
|
||||
.rn4 { animation-duration: 2.8s; animation-delay: 1.06s; }
|
||||
.rn5 { animation-duration: 2.0s; animation-delay: 1.67s; }
|
||||
.rn6 { animation-duration: 1.7s; animation-delay: 0.778s; }
|
||||
.rn7 { animation-duration: 2.3s; animation-delay: 1.69s; }
|
||||
.rn8 { animation-duration: 1.9s; animation-delay: 0.094s; }
|
||||
.rn9 { animation-duration: 2.6s; animation-delay: 2.3s; }
|
||||
.rn10 { animation-duration: 2.2s; animation-delay: 0.91s; }
|
||||
.rn11 { animation-duration: 1.5s; animation-delay: 0.155s; }
|
||||
.zap { animation: sg-zap 1.5s linear infinite; }
|
||||
@keyframes sg-zap { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -603.9; } }
|
||||
.ctr { animation: sg-zap 1.5s linear infinite; animation-delay: -0.5s; }
|
||||
.crk { animation: sg-zap 2.3s linear infinite, sg-flick 0.7s linear infinite; }
|
||||
@keyframes sg-flick { 0%,100% { opacity: 0.3; } 20% { opacity: 0.6; } 40% { opacity: 0.1; } 60% { opacity: 0.5; } 80% { opacity: 0.2; } }
|
||||
.shock { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: sg-shock 6.0s linear infinite; }
|
||||
@keyframes sg-shock { 0%, 14% { transform: scale(0); opacity: 0; } 15% { transform: scale(0); opacity: 0.5; } 25% { transform: scale(1); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }
|
||||
.slam { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: sg-slam 6.0s linear infinite; }
|
||||
@keyframes sg-slam { 0%, 2% { transform: scale(0); } 5% { transform: scale(1.15); } 8% { transform: scale(1); } 85% { transform: scale(1); } 95% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
|
||||
.orb { transform-box: fill-box; transform-origin: center; animation: sg-orb 1.5s ease-in-out infinite; }
|
||||
@keyframes sg-orb { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(2); opacity: 1; } }
|
||||
.bdr { animation: sg-bcycle 4s linear infinite, sg-breathe-o 2s ease-in-out infinite; }
|
||||
@keyframes sg-bcycle { 0%,100% { stroke: #7ddfbe; } 25% { stroke: #e8689e; } 50% { stroke: #4aade0; } 75% { stroke: #35925c; } }
|
||||
@keyframes sg-breathe-o { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
|
||||
.slam-s { animation-delay: 0s; }
|
||||
.shock-s { animation-delay: 0s; }
|
||||
.slam-u { animation-delay: 0.9s; }
|
||||
.shock-u { animation-delay: 0.9s; }
|
||||
.slam-c { animation-delay: 1.8s; }
|
||||
.shock-c { animation-delay: 1.8s; }
|
||||
.slam-h { animation-delay: 2.7s; }
|
||||
.shock-h { animation-delay: 2.7s; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.rn, .zap, .ctr, .crk, .shock { display: none; }
|
||||
.slam { animation: none; transform: scale(1); }
|
||||
.orb { animation: none; }
|
||||
.bdr { animation: none; }
|
||||
}
|
||||
</style>
|
||||
<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 clip-path="url(#sg-clip)" opacity="0.12" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="10" fill="#45c99e">
|
||||
<text class="rn rn0" x="10" y="0">01</text>
|
||||
<text class="rn rn1" x="25" y="0">{ }</text>
|
||||
<text class="rn rn2" x="42" y="0">S</text>
|
||||
<text class="rn rn3" x="58" y="0">10</text>
|
||||
<text class="rn rn4" x="74" y="0">U</text>
|
||||
<text class="rn rn5" x="90" y="0">0x</text>
|
||||
<text class="rn rn6" x="106" y="0">C</text>
|
||||
<text class="rn rn7" x="122" y="0">fn</text>
|
||||
<text class="rn rn8" x="138" y="0">H</text>
|
||||
<text class="rn rn9" x="154" y="0">;</text>
|
||||
<text class="rn rn10" x="170" y="0">=></text>
|
||||
<text class="rn rn11" x="185" y="0">[]</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>
|
||||
<circle class="shock shock-s" cx="60" cy="59.25" r="60" fill="url(#sg-shock-s)"/>
|
||||
<circle class="shock shock-u" cx="137" cy="59.25" r="60" fill="url(#sg-shock-u)"/>
|
||||
<circle class="shock shock-c" cx="60" cy="141" r="60" fill="url(#sg-shock-c)"/>
|
||||
<circle class="shock shock-h" cx="137" cy="141" r="60" fill="url(#sg-shock-h)"/>
|
||||
<path 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 58" stroke="#45c99e" stroke-width="2" opacity="0.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<path class="zap" 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 58" stroke="#7ddfbe" stroke-width="3" opacity="0.8" stroke-linecap="round" stroke-linejoin="round" fill="none" filter="url(#sg-mglow)" stroke-dasharray="15 588.9"/>
|
||||
<path class="ctr" 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 58" stroke="#ffffff" stroke-width="1.5" opacity="0.5" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="5 598.9"/>
|
||||
<path class="crk" 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 58" stroke="#45c99e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="3 40 8 60 2 80 5 400"/>
|
||||
<g>
|
||||
<g transform="translate(20,28)"><g class="orb" style="animation-delay:0s"><circle r="2.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(104,100)"><g class="orb" style="animation-delay:0.5s"><circle r="2.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(172,172)"><g class="orb" style="animation-delay:1s"><circle r="2.5" fill="#45c99e"/></g></g>
|
||||
</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>
|
||||
<rect class="bdr" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#7ddfbe" stroke-width="3.5"/>
|
||||
<g transform="translate(3,0)"><g class="slam slam-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"/></g></g>
|
||||
<g transform="translate(-3,0)"><g class="slam slam-u"><path d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#e8689e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(3,0)"><g class="slam slam-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"/></g></g>
|
||||
<g transform="translate(-3,0)"><g class="slam slam-h"><path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#3ad4c6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></g></g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 7.5 KiB |
@@ -1,205 +1,80 @@
|
||||
<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>
|
||||
<defs><filter id="sg-mglow" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="2.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter><clipPath id="sg-clip"><rect width="200" height="200" rx="26"/></clipPath><radialGradient id="sg-shock-s"><stop offset="0" stop-color="#1a5c38" stop-opacity="0.6"/><stop offset="1" stop-color="#1a5c38" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-u"><stop offset="0" stop-color="#b83670" stop-opacity="0.6"/><stop offset="1" stop-color="#b83670" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-c"><stop offset="0" stop-color="#176a92" stop-opacity="0.6"/><stop offset="1" stop-color="#176a92" stop-opacity="0"/></radialGradient><radialGradient id="sg-shock-h"><stop offset="0" stop-color="#12857e" stop-opacity="0.6"/><stop offset="1" stop-color="#12857e" stop-opacity="0"/></radialGradient></defs>
|
||||
<style>
|
||||
.rn { animation: sg-rain linear infinite; }
|
||||
@keyframes sg-rain { from { transform: translateY(-100px); } to { transform: translateY(320px); } }
|
||||
.rn0 { animation-duration: 2.1s; animation-delay: 0.73s; }
|
||||
.rn1 { animation-duration: 1.8s; animation-delay: 0.175s; }
|
||||
.rn2 { animation-duration: 2.5s; animation-delay: 1.75s; }
|
||||
.rn3 { animation-duration: 1.6s; animation-delay: 0.054s; }
|
||||
.rn4 { animation-duration: 2.8s; animation-delay: 1.06s; }
|
||||
.rn5 { animation-duration: 2.0s; animation-delay: 1.67s; }
|
||||
.rn6 { animation-duration: 1.7s; animation-delay: 0.778s; }
|
||||
.rn7 { animation-duration: 2.3s; animation-delay: 1.69s; }
|
||||
.rn8 { animation-duration: 1.9s; animation-delay: 0.094s; }
|
||||
.rn9 { animation-duration: 2.6s; animation-delay: 2.3s; }
|
||||
.rn10 { animation-duration: 2.2s; animation-delay: 0.91s; }
|
||||
.rn11 { animation-duration: 1.5s; animation-delay: 0.155s; }
|
||||
.zap { animation: sg-zap 1.5s linear infinite; }
|
||||
@keyframes sg-zap { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -603.9; } }
|
||||
.ctr { animation: sg-zap 1.5s linear infinite; animation-delay: -0.5s; }
|
||||
.crk { animation: sg-zap 2.3s linear infinite, sg-flick 0.7s linear infinite; }
|
||||
@keyframes sg-flick { 0%,100% { opacity: 0.3; } 20% { opacity: 0.6; } 40% { opacity: 0.1; } 60% { opacity: 0.5; } 80% { opacity: 0.2; } }
|
||||
.shock { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: sg-shock 6.0s linear infinite; }
|
||||
@keyframes sg-shock { 0%, 14% { transform: scale(0); opacity: 0; } 15% { transform: scale(0); opacity: 0.5; } 25% { transform: scale(1); opacity: 0; } 100% { transform: scale(0); opacity: 0; } }
|
||||
.slam { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: sg-slam 6.0s linear infinite; }
|
||||
@keyframes sg-slam { 0%, 2% { transform: scale(0); } 5% { transform: scale(1.15); } 8% { transform: scale(1); } 85% { transform: scale(1); } 95% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
|
||||
.orb { transform-box: fill-box; transform-origin: center; animation: sg-orb 1.5s ease-in-out infinite; }
|
||||
@keyframes sg-orb { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(2); opacity: 1; } }
|
||||
.bdr { animation: sg-bcycle 4s linear infinite, sg-breathe-o 2s ease-in-out infinite; }
|
||||
@keyframes sg-bcycle { 0%,100% { stroke: #2f8f5e; } 25% { stroke: #b83670; } 50% { stroke: #176a92; } 75% { stroke: #1a5c38; } }
|
||||
@keyframes sg-breathe-o { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
|
||||
.slam-s { animation-delay: 0s; }
|
||||
.shock-s { animation-delay: 0s; }
|
||||
.slam-u { animation-delay: 0.9s; }
|
||||
.shock-u { animation-delay: 0.9s; }
|
||||
.slam-c { animation-delay: 1.8s; }
|
||||
.shock-c { animation-delay: 1.8s; }
|
||||
.slam-h { animation-delay: 2.7s; }
|
||||
.shock-h { animation-delay: 2.7s; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.rn, .zap, .ctr, .crk, .shock { display: none; }
|
||||
.slam { animation: none; transform: scale(1); }
|
||||
.orb { animation: none; }
|
||||
.bdr { animation: none; }
|
||||
}
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#f7f8fa"/>
|
||||
<g clip-path="url(#sg-clip)" opacity="0.12" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="10" fill="#1a5c38">
|
||||
<text class="rn rn0" x="10" y="0">01</text>
|
||||
<text class="rn rn1" x="25" y="0">{ }</text>
|
||||
<text class="rn rn2" x="42" y="0">S</text>
|
||||
<text class="rn rn3" x="58" y="0">10</text>
|
||||
<text class="rn rn4" x="74" y="0">U</text>
|
||||
<text class="rn rn5" x="90" y="0">0x</text>
|
||||
<text class="rn rn6" x="106" y="0">C</text>
|
||||
<text class="rn rn7" x="122" y="0">fn</text>
|
||||
<text class="rn rn8" x="138" y="0">H</text>
|
||||
<text class="rn rn9" x="154" y="0">;</text>
|
||||
<text class="rn rn10" x="170" y="0">=></text>
|
||||
<text class="rn rn11" x="185" y="0">[]</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>
|
||||
<circle class="shock shock-s" cx="60" cy="59.25" r="60" fill="url(#sg-shock-s)"/>
|
||||
<circle class="shock shock-u" cx="137" cy="59.25" r="60" fill="url(#sg-shock-u)"/>
|
||||
<circle class="shock shock-c" cx="60" cy="141" r="60" fill="url(#sg-shock-c)"/>
|
||||
<circle class="shock shock-h" cx="137" cy="141" r="60" fill="url(#sg-shock-h)"/>
|
||||
<path 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 58" stroke="#1a5c38" stroke-width="2" opacity="0.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<path class="zap" 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 58" stroke="#2f8f5e" stroke-width="3" opacity="0.8" stroke-linecap="round" stroke-linejoin="round" fill="none" filter="url(#sg-mglow)" stroke-dasharray="15 588.9"/>
|
||||
<path class="ctr" 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 58" stroke="#0a0a14" stroke-width="1.5" opacity="0.5" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="5 598.9"/>
|
||||
<path class="crk" 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 58" stroke="#1a5c38" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="3 40 8 60 2 80 5 400"/>
|
||||
<g>
|
||||
<g transform="translate(20,28)"><g class="orb" style="animation-delay:0s"><circle r="2.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(104,100)"><g class="orb" style="animation-delay:0.5s"><circle r="2.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(172,172)"><g class="orb" style="animation-delay:1s"><circle r="2.5" fill="#1a5c38"/></g></g>
|
||||
</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>
|
||||
<rect class="bdr" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#2f8f5e" stroke-width="3.5"/>
|
||||
<g transform="translate(3,0)"><g class="slam slam-s"><path d="M 78,36 H 36 V 58 H 78 V 82 H 36" fill="none" stroke="#1a5c38" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(-3,0)"><g class="slam slam-u"><path d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#b83670" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(3,0)"><g class="slam slam-c"><path d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#176a92" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></g></g>
|
||||
<g transform="translate(-3,0)"><g class="slam slam-h"><path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#12857e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></g></g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 7.5 KiB |
@@ -1,125 +1,44 @@
|
||||
<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 -->
|
||||
<defs><filter id="sg-tglow" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter><pattern id="sg-scan" patternUnits="userSpaceOnUse" width="200" height="4"><rect width="200" height="1.5" fill="#ffffff" opacity="0.015"/></pattern></defs>
|
||||
<style>
|
||||
.ch0 { opacity: 0; animation: sg-ch0 6s linear infinite; }
|
||||
@keyframes sg-ch0 { 0%, 5% { opacity: 0; } 6%, 35% { opacity: 0.85; } 38%, 100% { opacity: 0; } }
|
||||
.ch1 { opacity: 0; animation: sg-ch1 6s linear infinite; }
|
||||
@keyframes sg-ch1 { 0%, 8% { opacity: 0; } 9%, 35% { opacity: 0.85; } 38%, 100% { opacity: 0; } }
|
||||
.ch2 { opacity: 0; animation: sg-ch2 6s linear infinite; }
|
||||
@keyframes sg-ch2 { 0%, 13% { opacity: 0; } 14%, 35% { opacity: 0.85; } 38%, 100% { opacity: 0; } }
|
||||
.ch3 { opacity: 0; animation: sg-ch3 6s linear infinite; }
|
||||
@keyframes sg-ch3 { 0%, 18% { opacity: 0; } 19%, 35% { opacity: 0.85; } 38%, 100% { opacity: 0; } }
|
||||
.ch4 { opacity: 0; animation: sg-ch4 6s linear infinite; }
|
||||
@keyframes sg-ch4 { 0%, 23% { opacity: 0; } 24%, 35% { opacity: 0.85; } 38%, 100% { opacity: 0; } }
|
||||
.caret { animation: sg-caret-x 6s linear infinite, sg-blink 6s linear infinite; }
|
||||
@keyframes sg-caret-x { 0%, 7% { transform: translateX(0); } 8%, 12% { transform: translateX(16px); } 13%, 17% { transform: translateX(32px); } 18%, 22% { transform: translateX(48px); } 23%, 100% { transform: translateX(64px); } }
|
||||
@keyframes sg-blink { 0%, 5% { opacity: 0; } 6%, 9% { opacity: 0.8; } 10%, 13% { opacity: 0; } 14%, 17% { opacity: 0.8; } 18%, 21% { opacity: 0; } 22%, 35% { opacity: 0.8; } 38%, 100% { opacity: 0; } }
|
||||
.mat { opacity: 0; animation: sg-mat 6s linear infinite; }
|
||||
@keyframes sg-mat { 0%, 38% { opacity: 0; } 45%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
|
||||
.flash { opacity: 0; animation: sg-flash 6s linear infinite; }
|
||||
@keyframes sg-flash { 0%, 37% { opacity: 0; } 39% { opacity: 0.08; } 44%, 100% { opacity: 0; } }
|
||||
.mat-s { animation-delay: 0s; }
|
||||
.mat-u { animation-delay: 0.24s; }
|
||||
.mat-c { animation-delay: 0.48s; }
|
||||
.mat-h { animation-delay: 0.72s; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ch0,.ch1,.ch2,.ch3,.ch4,.caret,.flash { display: none; }
|
||||
.mat { animation: none; opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
<rect width="200" height="200" rx="26" fill="url(#sg-scan)"/>
|
||||
<rect x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#45c99e" stroke-width="3.5" filter="url(#sg-tglow)" opacity="0.6"/>
|
||||
<text class="ch0" x="30" y="110" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="26" font-weight="bold" fill="#45c99e">></text>
|
||||
<text class="ch1" x="52" y="110" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="26" font-weight="bold" fill="#35925c">s</text>
|
||||
<text class="ch2" x="68" y="110" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="26" font-weight="bold" fill="#e8689e">u</text>
|
||||
<text class="ch3" x="84" y="110" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="26" font-weight="bold" fill="#4aade0">c</text>
|
||||
<text class="ch4" x="100" y="110" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="26" font-weight="bold" fill="#3ad4c6">h</text>
|
||||
<rect class="caret" x="52" y="90" width="13" height="22" rx="2" fill="#e8689e"/>
|
||||
<path class="mat mat-s" 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(#sg-tglow)" transform="translate(3,0)"/>
|
||||
<path class="mat mat-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#e8689e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-tglow)" transform="translate(-3,0)"/>
|
||||
<path class="mat mat-c" 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(#sg-tglow)" transform="translate(3,0)"/>
|
||||
<path class="mat mat-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#3ad4c6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-tglow)" transform="translate(-3,0)"/>
|
||||
<rect class="flash" width="200" height="200" rx="26" fill="#45c99e"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 4.5 KiB |
@@ -1,125 +1,44 @@
|
||||
<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>
|
||||
<defs><filter id="sg-tglow" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter><pattern id="sg-scan" patternUnits="userSpaceOnUse" width="200" height="4"><rect width="200" height="1.5" fill="#0a0a14" opacity="0.015"/></pattern></defs>
|
||||
<style>
|
||||
.ch0 { opacity: 0; animation: sg-ch0 6s linear infinite; }
|
||||
@keyframes sg-ch0 { 0%, 5% { opacity: 0; } 6%, 35% { opacity: 0.85; } 38%, 100% { opacity: 0; } }
|
||||
.ch1 { opacity: 0; animation: sg-ch1 6s linear infinite; }
|
||||
@keyframes sg-ch1 { 0%, 8% { opacity: 0; } 9%, 35% { opacity: 0.85; } 38%, 100% { opacity: 0; } }
|
||||
.ch2 { opacity: 0; animation: sg-ch2 6s linear infinite; }
|
||||
@keyframes sg-ch2 { 0%, 13% { opacity: 0; } 14%, 35% { opacity: 0.85; } 38%, 100% { opacity: 0; } }
|
||||
.ch3 { opacity: 0; animation: sg-ch3 6s linear infinite; }
|
||||
@keyframes sg-ch3 { 0%, 18% { opacity: 0; } 19%, 35% { opacity: 0.85; } 38%, 100% { opacity: 0; } }
|
||||
.ch4 { opacity: 0; animation: sg-ch4 6s linear infinite; }
|
||||
@keyframes sg-ch4 { 0%, 23% { opacity: 0; } 24%, 35% { opacity: 0.85; } 38%, 100% { opacity: 0; } }
|
||||
.caret { animation: sg-caret-x 6s linear infinite, sg-blink 6s linear infinite; }
|
||||
@keyframes sg-caret-x { 0%, 7% { transform: translateX(0); } 8%, 12% { transform: translateX(16px); } 13%, 17% { transform: translateX(32px); } 18%, 22% { transform: translateX(48px); } 23%, 100% { transform: translateX(64px); } }
|
||||
@keyframes sg-blink { 0%, 5% { opacity: 0; } 6%, 9% { opacity: 0.8; } 10%, 13% { opacity: 0; } 14%, 17% { opacity: 0.8; } 18%, 21% { opacity: 0; } 22%, 35% { opacity: 0.8; } 38%, 100% { opacity: 0; } }
|
||||
.mat { opacity: 0; animation: sg-mat 6s linear infinite; }
|
||||
@keyframes sg-mat { 0%, 38% { opacity: 0; } 45%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
|
||||
.flash { opacity: 0; animation: sg-flash 6s linear infinite; }
|
||||
@keyframes sg-flash { 0%, 37% { opacity: 0; } 39% { opacity: 0.08; } 44%, 100% { opacity: 0; } }
|
||||
.mat-s { animation-delay: 0s; }
|
||||
.mat-u { animation-delay: 0.24s; }
|
||||
.mat-c { animation-delay: 0.48s; }
|
||||
.mat-h { animation-delay: 0.72s; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ch0,.ch1,.ch2,.ch3,.ch4,.caret,.flash { display: none; }
|
||||
.mat { animation: none; opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#f7f8fa"/>
|
||||
<rect width="200" height="200" rx="26" fill="url(#sg-scan)"/>
|
||||
<rect x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#1a5c38" stroke-width="3.5" filter="url(#sg-tglow)" opacity="0.6"/>
|
||||
<text class="ch0" x="30" y="110" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="26" font-weight="bold" fill="#1a5c38">></text>
|
||||
<text class="ch1" x="52" y="110" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="26" font-weight="bold" fill="#1a5c38">s</text>
|
||||
<text class="ch2" x="68" y="110" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="26" font-weight="bold" fill="#b83670">u</text>
|
||||
<text class="ch3" x="84" y="110" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="26" font-weight="bold" fill="#176a92">c</text>
|
||||
<text class="ch4" x="100" y="110" font-family="ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace" font-size="26" font-weight="bold" fill="#12857e">h</text>
|
||||
<rect class="caret" x="52" y="90" width="13" height="22" rx="2" fill="#b83670"/>
|
||||
<path class="mat mat-s" d="M 78,36 H 36 V 58 H 78 V 82 H 36" fill="none" stroke="#1a5c38" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-tglow)" transform="translate(3,0)"/>
|
||||
<path class="mat mat-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#b83670" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-tglow)" transform="translate(-3,0)"/>
|
||||
<path class="mat mat-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#176a92" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-tglow)" transform="translate(3,0)"/>
|
||||
<path class="mat mat-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#12857e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-tglow)" transform="translate(-3,0)"/>
|
||||
<rect class="flash" width="200" height="200" rx="26" fill="#1a5c38"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 4.5 KiB |
@@ -0,0 +1,50 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<defs><filter id="sg-pulse-glow"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
|
||||
<style>
|
||||
.pl0 { animation: sg-pl0 3s linear infinite; }
|
||||
@keyframes sg-pl0 { from { stroke-dashoffset: -0; } to { stroke-dashoffset: -380.5; } }
|
||||
.pl1 { animation: sg-pl1 3s linear infinite; }
|
||||
@keyframes sg-pl1 { from { stroke-dashoffset: -190.2; } to { stroke-dashoffset: -570.7; } }
|
||||
.pl2 { animation: sg-pl2 3s linear infinite; }
|
||||
@keyframes sg-pl2 { from { stroke-dashoffset: -63.54; } to { stroke-dashoffset: -444; } }
|
||||
.pt { offset-path: path("M 178,178 C 178,92 142,20 100,20 C 58,20 22,92 22,178"); offset-rotate: auto;
|
||||
animation: sg-pt 3s linear infinite; animation-delay: -0.2365s; }
|
||||
@keyframes sg-pt { from { offset-distance: 0%; } to { offset-distance: 100%; } }
|
||||
.nd { transform-box: fill-box; transform-origin: center; opacity: 0.24;
|
||||
animation: sg-node 3s linear infinite; }
|
||||
@keyframes sg-node {
|
||||
0% { transform: scale(1); opacity: 0.24; }
|
||||
6% { transform: scale(1.8); opacity: 1; }
|
||||
34% { transform: scale(1); opacity: 0.24; }
|
||||
100% { transform: scale(1); opacity: 0.24; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.pl, .pt { display: none; }
|
||||
.nd { animation: none; }
|
||||
}
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#0a0a0a"/>
|
||||
<g class="field">
|
||||
<path d="M 178,178 C 178,92 142,20 100,20 C 58,20 22,92 22,178" fill="none" stroke="#45c99e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.24"/>
|
||||
<path class="pl pl0" d="M 178,178 C 178,92 142,20 100,20 C 58,20 22,92 22,178" fill="none" stroke="#45c99e" stroke-width="3" opacity="0.9" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-pulse-glow)" stroke-dasharray="30 350.5"/>
|
||||
<path class="pl pl1" d="M 178,178 C 178,92 142,20 100,20 C 58,20 22,92 22,178" fill="none" stroke="#7ddfbe" stroke-width="2" opacity="0.6" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-pulse-glow)" stroke-dasharray="20 360.5"/>
|
||||
<path class="pl pl2" d="M 178,178 C 178,92 142,20 100,20 C 58,20 22,92 22,178" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 372.5"/>
|
||||
<g class="nodes" filter="url(#sg-pulse-glow)">
|
||||
<g transform="translate(178,178)"><g class="nd" style="animation-delay:0s"><circle r="2" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(174.2,130.6)"><g class="nd" style="animation-delay:0.375s"><circle r="1.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(162.4,84.7)"><g class="nd" style="animation-delay:0.75s"><circle r="1.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(139.8,43)"><g class="nd" style="animation-delay:1.13s"><circle r="2" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(100,20)"><g class="nd" style="animation-delay:1.5s"><circle r="3.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(60.2,43)"><g class="nd" style="animation-delay:1.87s"><circle r="2" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(37.6,84.7)"><g class="nd" style="animation-delay:2.25s"><circle r="1.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(25.8,130.6)"><g class="nd" style="animation-delay:2.62s"><circle r="1.5" fill="#45c99e"/></g></g>
|
||||
<g transform="translate(22,178)"><g class="nd" style="animation-delay:3s"><circle r="2" fill="#45c99e"/></g></g>
|
||||
</g>
|
||||
</g>
|
||||
<g class="pt" filter="url(#sg-pulse-glow)"><path d="M 8,0 L 2.5,2.8 L -2.5,2.2 L -4.6,4.6 L -4.2,1.3 L -5.6,0 L -4.2,-1.3 L -4.6,-4.6 L -2.5,-2.2 L 2.5,-2.8 Z" fill="#ffffff" opacity="0.9"/></g>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#45c99e" stroke-width="3.5" opacity="0.7"/>
|
||||
<path class="g g-s" 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" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#e8689e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#4aade0" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#3ad4c6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
@@ -0,0 +1,50 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<defs><filter id="sg-pulse-glow"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
|
||||
<style>
|
||||
.pl0 { animation: sg-pl0 3s linear infinite; }
|
||||
@keyframes sg-pl0 { from { stroke-dashoffset: -0; } to { stroke-dashoffset: -380.5; } }
|
||||
.pl1 { animation: sg-pl1 3s linear infinite; }
|
||||
@keyframes sg-pl1 { from { stroke-dashoffset: -190.2; } to { stroke-dashoffset: -570.7; } }
|
||||
.pl2 { animation: sg-pl2 3s linear infinite; }
|
||||
@keyframes sg-pl2 { from { stroke-dashoffset: -63.54; } to { stroke-dashoffset: -444; } }
|
||||
.pt { offset-path: path("M 178,178 C 178,92 142,20 100,20 C 58,20 22,92 22,178"); offset-rotate: auto;
|
||||
animation: sg-pt 3s linear infinite; animation-delay: -0.2365s; }
|
||||
@keyframes sg-pt { from { offset-distance: 0%; } to { offset-distance: 100%; } }
|
||||
.nd { transform-box: fill-box; transform-origin: center; opacity: 0.2;
|
||||
animation: sg-node 3s linear infinite; }
|
||||
@keyframes sg-node {
|
||||
0% { transform: scale(1); opacity: 0.2; }
|
||||
6% { transform: scale(1.8); opacity: 1; }
|
||||
34% { transform: scale(1); opacity: 0.2; }
|
||||
100% { transform: scale(1); opacity: 0.2; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.pl, .pt { display: none; }
|
||||
.nd { animation: none; }
|
||||
}
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#f7f8fa"/>
|
||||
<g class="field">
|
||||
<path d="M 178,178 C 178,92 142,20 100,20 C 58,20 22,92 22,178" fill="none" stroke="#1a5c38" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.2"/>
|
||||
<path class="pl pl0" d="M 178,178 C 178,92 142,20 100,20 C 58,20 22,92 22,178" fill="none" stroke="#1a5c38" stroke-width="3" opacity="0.9" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-pulse-glow)" stroke-dasharray="30 350.5"/>
|
||||
<path class="pl pl1" d="M 178,178 C 178,92 142,20 100,20 C 58,20 22,92 22,178" fill="none" stroke="#2f8f5e" stroke-width="2" opacity="0.6" stroke-linecap="round" stroke-linejoin="round" filter="url(#sg-pulse-glow)" stroke-dasharray="20 360.5"/>
|
||||
<path class="pl pl2" d="M 178,178 C 178,92 142,20 100,20 C 58,20 22,92 22,178" fill="none" stroke="#0a0a14" stroke-width="1.5" opacity="0.4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 372.5"/>
|
||||
<g class="nodes" filter="url(#sg-pulse-glow)">
|
||||
<g transform="translate(178,178)"><g class="nd" style="animation-delay:0s"><circle r="2" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(174.2,130.6)"><g class="nd" style="animation-delay:0.375s"><circle r="1.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(162.4,84.7)"><g class="nd" style="animation-delay:0.75s"><circle r="1.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(139.8,43)"><g class="nd" style="animation-delay:1.13s"><circle r="2" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(100,20)"><g class="nd" style="animation-delay:1.5s"><circle r="3.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(60.2,43)"><g class="nd" style="animation-delay:1.87s"><circle r="2" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(37.6,84.7)"><g class="nd" style="animation-delay:2.25s"><circle r="1.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(25.8,130.6)"><g class="nd" style="animation-delay:2.62s"><circle r="1.5" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(22,178)"><g class="nd" style="animation-delay:3s"><circle r="2" fill="#1a5c38"/></g></g>
|
||||
</g>
|
||||
</g>
|
||||
<g class="pt" filter="url(#sg-pulse-glow)"><path d="M 8,0 L 2.5,2.8 L -2.5,2.2 L -4.6,4.6 L -4.2,1.3 L -5.6,0 L -4.2,-1.3 L -4.6,-4.6 L -2.5,-2.2 L 2.5,-2.8 Z" fill="#0a0a14" opacity="0.9"/></g>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#1a5c38" stroke-width="3.5" opacity="0.45"/>
|
||||
<path class="g g-s" d="M 78,36 H 36 V 58 H 78 V 82 H 36" fill="none" stroke="#1a5c38" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#b83670" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#176a92" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#12857e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
@@ -0,0 +1,47 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<defs><filter id="sg-sym-glow"><feGaussianBlur stdDeviation="2.2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
|
||||
<style>
|
||||
.d { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: sg-dot-in 420ms ease-in-out forwards, sg-dot-out 420ms ease-in-out forwards; }
|
||||
@keyframes sg-dot-in { to { transform: scale(1); } }
|
||||
@keyframes sg-dot-out { from { transform: scale(1); opacity: 1; } to { transform: scale(0.55); opacity: 0; } }
|
||||
.sym { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.62); animation: sg-sym-in 420ms ease-in-out forwards, sg-sym-out 900ms ease-in-out forwards; }
|
||||
@keyframes sg-sym-in { to { opacity: 1; transform: scale(1); } }
|
||||
@keyframes sg-sym-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.55); } }
|
||||
.g { stroke-dasharray: 400; stroke-dashoffset: 400; animation: sg-draw 1600ms ease-in-out forwards; }
|
||||
@keyframes sg-draw { to { stroke-dashoffset: 0; } }
|
||||
.frame { opacity: 0; animation: sg-fade 900ms ease-out forwards; }
|
||||
@keyframes sg-fade { to { opacity: var(--frame-opacity, 0.45); } }
|
||||
.d-s { animation-delay: 0ms, 540ms; }
|
||||
.sym-s { animation-delay: 540ms, 1640ms; }
|
||||
.g-s { animation-delay: 1640ms; }
|
||||
.d-u { animation-delay: 180ms, 720ms; }
|
||||
.sym-u { animation-delay: 720ms, 1820ms; }
|
||||
.g-u { animation-delay: 1820ms; }
|
||||
.d-c { animation-delay: 360ms, 900ms; }
|
||||
.sym-c { animation-delay: 900ms, 2000ms; }
|
||||
.g-c { animation-delay: 2000ms; }
|
||||
.d-h { animation-delay: 540ms, 1080ms; }
|
||||
.sym-h { animation-delay: 1080ms, 2180ms; }
|
||||
.g-h { animation-delay: 2180ms; }
|
||||
.frame { animation-delay: 1640ms; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.d, .sym { display: none; }
|
||||
.g { animation: none; stroke-dashoffset: 0; }
|
||||
.frame { animation: none; opacity: 0.45; }
|
||||
}
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#0a0a0a"/>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#45c99e" stroke-width="3.5" opacity="0.7"/>
|
||||
<g transform="translate(60,59.25)"><g class="d d-s"><circle r="24" fill="#35925c"/></g></g>
|
||||
<g transform="translate(38,39.71) scale(0.4247)"><g class="sym sym-s"><path d="M4.3 -0.10000000000000853H12.5Q15.5 -0.20000000000000284 18.0 1.3999999999999986Q20.5 3.0 21.700000000000003 5.599999999999994H95.80000000000001Q99.2 5.599999999999994 101.4 8.399999999999999Q103.60000000000001 11.200000000000003 102.7 14.700000000000003L95.30000000000001 42.199999999999996Q94.2 46.6 90.7 49.2Q87.2 51.8 82.80000000000001 51.8H30.8L31.700000000000003 56.9Q32.0 58.4 33.2 59.4Q34.4 60.4 36.0 60.5H88.0Q89.80000000000001 60.599999999999994 91.0 61.8Q92.2 63.0 92.30000000000001 64.8Q92.2 66.6 91.0 67.8Q89.80000000000001 69.0 88.0 69.1H36.0Q31.400000000000002 69.2 27.800000000000004 66.2Q24.200000000000003 63.2 23.3 58.599999999999994L14.0 9.700000000000003Q13.8 8.5 12.5 8.5H4.3Q2.4000000000000004 8.399999999999991 1.2000000000000002 7.199999999999996Q0.0 6.0 0.0 4.199999999999996Q0.0 2.3999999999999915 1.2000000000000002 1.1999999999999957Q2.4000000000000004 0.0 4.3 -0.10000000000000853ZM23.1 83.5Q23.1 79.9 25.6 77.4Q28.1 74.9 31.700000000000003 74.9Q35.2 74.9 37.800000000000004 77.4Q40.400000000000006 79.9 40.400000000000006 83.5Q40.400000000000006 87.0 37.800000000000004 89.6Q35.2 92.2 31.700000000000003 92.2Q28.1 92.2 25.6 89.6Q23.1 87.0 23.1 83.5ZM83.7 74.9Q87.30000000000001 74.9 89.80000000000001 77.4Q92.30000000000001 79.9 92.30000000000001 83.5Q92.30000000000001 87.0 89.80000000000001 89.6Q87.30000000000001 92.2 83.7 92.2Q80.2 92.2 77.6 89.6Q75.0 87.0 75.0 83.5Q75.0 79.9 77.6 77.4Q80.2 74.9 83.7 74.9Z" fill="#35925c" filter="url(#sg-sym-glow)"/></g></g>
|
||||
<g transform="translate(137,59.25)"><g class="d d-u"><circle r="24" fill="#e8689e"/></g></g>
|
||||
<g transform="translate(120.6,37.35) scale(0.4762)"><g class="sym sym-u"><path d="M55.2 43.599999999999994Q69.0 46.8 67.7 61.599999999999994Q66.9 71.2 60.5 75.2Q54.1 79.2 42.0 79.8V92.2H33.2V80.2Q28.700000000000003 80.2 26.3 80.0V92.2H17.5V79.8H0.0L1.7000000000000002 69.4Q8.4 69.6 9.5 69.2Q11.0 68.6 11.3 66.6V27.4Q11.100000000000001 25.799999999999997 10.3 24.999999999999996Q9.5 24.199999999999996 8.3 23.799999999999997Q7.1000000000000005 23.4 5.300000000000001 23.4Q3.5 23.4 1.4000000000000001 23.4Q0.5 23.4 0.0 23.4V14.200000000000003H17.5V-0.20000000000000284H26.3V13.799999999999997Q28.6 13.799999999999997 33.2 13.799999999999997V-0.20000000000000284H42.0V14.200000000000003Q51.2 15.0 56.6 18.4Q62.0 21.799999999999997 62.7 29.0Q63.6 39.199999999999996 55.2 43.599999999999994ZM26.5 24.0V41.599999999999994Q26.700000000000003 41.599999999999994 28.5 41.599999999999994Q30.3 41.599999999999994 31.1 41.599999999999994Q32.0 41.599999999999994 33.900000000000006 41.5Q35.800000000000004 41.4 37.0 41.2Q38.2 41.0 39.900000000000006 40.599999999999994Q41.7 40.199999999999996 42.7 39.5Q43.7 38.8 44.7 38.0Q45.7 37.199999999999996 46.300000000000004 35.8Q46.800000000000004 34.4 46.800000000000004 32.8Q46.800000000000004 30.799999999999997 46.0 29.199999999999996Q45.1 27.599999999999994 43.5 26.599999999999994Q41.900000000000006 25.599999999999994 40.5 25.0Q39.1 24.4 36.5 24.199999999999996Q33.9 24.0 32.7 24.0Q31.5 24.0 29.1 24.0Q26.700000000000003 24.0 26.5 24.0ZM26.5 69.4Q26.900000000000002 69.6 28.900000000000002 69.6Q30.900000000000002 69.6 31.900000000000002 69.6Q33.1 69.6 35.300000000000004 69.4Q37.5 69.4 38.900000000000006 69.1Q40.300000000000004 68.8 42.400000000000006 68.4Q44.5 68.0 45.7 67.2Q46.900000000000006 66.4 48.1 65.4Q49.300000000000004 64.4 49.900000000000006 63.0Q50.5 61.599999999999994 50.5 59.8Q50.5 57.599999999999994 49.5 55.8Q48.5 54.0 46.7 53.0Q44.7 52.0 43.0 51.4Q41.300000000000004 50.8 38.300000000000004 50.599999999999994Q35.300000000000004 50.4 33.9 50.2Q32.5 50.2 29.6 50.2Q26.700000000000003 50.2 26.5 50.2Z" fill="#e8689e" filter="url(#sg-sym-glow)"/></g></g>
|
||||
<g transform="translate(60,141)"><g class="d d-c"><circle r="24" fill="#4aade0"/></g></g>
|
||||
<g transform="translate(38,119) scale(0.4793)"><g class="sym sym-c"><path d="M70.9 12.599999999999994Q62.300000000000004 12.599999999999994 57.0 15.099999999999994Q51.7 12.599999999999994 45.85 12.599999999999994Q40.0 12.599999999999994 34.800000000000004 15.099999999999994Q29.5 12.599999999999994 20.900000000000002 12.599999999999994Q15.200000000000001 12.599999999999994 10.0 21.599999999999994Q5.7 28.699999999999996 2.7 39.699999999999996Q0.0 49.3 0.0 54.4Q0.0 56.9 3.7 59.05Q7.4 61.2 13.100000000000001 62.2Q15.200000000000001 69.2 23.700000000000003 74.0Q32.2 78.8 43.800000000000004 79.4V61.4Q37.6 57.5 37.5 54.4Q37.5 51.7 41.800000000000004 50.7Q43.800000000000004 50.099999999999994 45.900000000000006 50.099999999999994L48.0 50.3Q50.5 50.7 52.1 51.5Q54.2 52.5 54.300000000000004 54.4Q54.300000000000004 57.5 48.0 61.4V79.4Q59.5 78.8 68.05000000000001 74.0Q76.60000000000001 69.2 78.7 62.2Q84.4 61.2 88.10000000000001 59.05Q91.80000000000001 56.9 91.80000000000001 54.4Q91.80000000000001 49.3 89.10000000000001 39.699999999999996Q86.2 28.799999999999997 81.80000000000001 21.599999999999994Q76.60000000000001 12.599999999999994 70.9 12.599999999999994ZM13.3 53.8Q10.600000000000001 53.3 8.4 52.3Q9.0 46.8 11.3 39.4Q13.600000000000001 32.8 16.450000000000003 27.299999999999997Q19.3 21.799999999999997 21.1 21.0Q23.200000000000003 21.0 26.400000000000002 21.4H26.6Q20.900000000000002 27.799999999999997 17.0 38.4Q14.5 45.6 13.3 53.8ZM33.4 46.0Q31.6 46.0 30.450000000000003 44.849999999999994Q29.3 43.699999999999996 29.3 41.89999999999999Q29.3 40.099999999999994 30.450000000000003 38.849999999999994Q31.6 37.599999999999994 33.400000000000006 37.599999999999994Q35.2 37.599999999999994 36.35 38.849999999999994Q37.5 40.099999999999994 37.5 41.89999999999999Q37.5 43.699999999999996 36.35 44.849999999999994Q35.2 46.0 33.4 46.0ZM58.400000000000006 46.0Q56.6 46.0 55.45 44.849999999999994Q54.300000000000004 43.699999999999996 54.300000000000004 41.89999999999999Q54.300000000000004 40.099999999999994 55.45 38.849999999999994Q56.6 37.599999999999994 58.400000000000006 37.599999999999994Q60.2 37.599999999999994 61.35 38.849999999999994Q62.5 40.099999999999994 62.5 41.89999999999999Q62.5 43.699999999999996 61.35 44.849999999999994Q60.2 46.0 58.400000000000006 46.0ZM78.5 53.8Q77.30000000000001 45.6 74.8 38.4Q70.9 27.9 65.2 21.4H65.4Q68.5 21.0 70.7 21.0Q72.5 21.799999999999997 75.30000000000001 27.249999999999996Q78.10000000000001 32.699999999999996 80.5 39.4Q82.80000000000001 46.9 83.4 52.3Q81.4 53.3 78.5 53.8Z" fill="#4aade0" filter="url(#sg-sym-glow)"/></g></g>
|
||||
<g transform="translate(137,141)"><g class="d d-h"><circle r="24" fill="#3ad4c6"/></g></g>
|
||||
<g transform="translate(115.7,113.6) scale(0.5962)"><g class="sym sym-h"><path d="M35.800000000000004 41.9Q37.6 41.9 38.75 43.05Q39.900000000000006 44.199999999999996 39.900000000000006 46.0Q39.900000000000006 47.8 38.75 48.949999999999996Q37.6 50.099999999999994 35.8 50.099999999999994Q34.0 50.099999999999994 32.85 48.949999999999996Q31.700000000000003 47.8 31.700000000000003 46.0Q31.700000000000003 44.199999999999996 32.85 43.05Q34.0 41.9 35.800000000000004 41.9ZM3.4000000000000004 13.599999999999994Q7.9 9.099999999999994 16.650000000000002 10.749999999999993Q25.400000000000002 12.399999999999991 35.800000000000004 19.199999999999996Q46.2 12.399999999999991 54.95 10.749999999999993Q63.7 9.099999999999994 68.2 13.599999999999994Q72.7 18.099999999999994 71.05000000000001 26.849999999999994Q69.4 35.599999999999994 62.6 46.0Q69.4 56.4 71.05000000000001 65.15Q72.7 73.9 68.2 78.4Q63.7 82.9 54.95 81.25Q46.2 79.6 35.800000000000004 72.8Q25.400000000000002 79.6 16.650000000000002 81.25Q7.9 82.9 3.4000000000000004 78.4Q-1.1 73.9 0.55 65.15Q2.2 56.4 9.0 46.0Q2.2 35.599999999999994 0.55 26.849999999999994Q-1.1 18.099999999999994 3.4000000000000004 13.599999999999994ZM50.6 31.199999999999996Q54.1 34.9 57.7 39.199999999999996Q62.0 32.4 63.25 27.099999999999998Q64.5 21.799999999999997 62.25 19.549999999999997Q60.0 17.299999999999997 54.75 18.549999999999997Q49.5 19.799999999999997 42.6 24.099999999999994Q46.900000000000006 27.699999999999996 50.6 31.199999999999996ZM21.0 60.8Q17.5 57.099999999999994 13.9 52.8Q9.600000000000001 59.599999999999994 8.350000000000001 64.9Q7.1000000000000005 70.2 9.350000000000001 72.45Q11.600000000000001 74.7 16.85 73.45Q22.1 72.2 29.0 67.9Q24.700000000000003 64.3 21.0 60.8ZM9.200000000000001 19.4Q7.1000000000000005 21.699999999999996 8.350000000000001 26.999999999999996Q9.600000000000001 32.3 13.9 39.199999999999996Q17.400000000000002 34.9 21.050000000000004 31.249999999999996Q24.700000000000003 27.599999999999994 29.0 24.099999999999994Q22.200000000000003 19.799999999999997 16.85 18.549999999999997Q11.5 17.299999999999997 9.200000000000001 19.4ZM27.0 54.8Q31.1 58.9 35.800000000000004 62.8Q40.5 58.9 44.6 54.8Q48.7 50.7 52.6 46.0Q48.7 41.3 44.6 37.199999999999996Q40.5 33.099999999999994 35.800000000000004 29.199999999999996Q31.1 33.099999999999994 27.0 37.199999999999996Q22.900000000000002 41.3 19.0 46.0Q22.900000000000002 50.7 27.0 54.8ZM62.400000000000006 72.6Q64.5 70.3 63.25 65.0Q62.0 59.7 57.7 52.8Q54.2 57.099999999999994 50.550000000000004 60.75Q46.900000000000006 64.4 42.6 67.9Q49.400000000000006 72.2 54.75 73.45Q60.1 74.7 62.400000000000006 72.6Z" fill="#3ad4c6" filter="url(#sg-sym-glow)"/></g></g>
|
||||
<path class="g g-s" 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" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#e8689e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#4aade0" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#3ad4c6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,47 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<defs><filter id="sg-sym-glow"><feGaussianBlur stdDeviation="2.2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
|
||||
<style>
|
||||
.d { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: sg-dot-in 420ms ease-in-out forwards, sg-dot-out 420ms ease-in-out forwards; }
|
||||
@keyframes sg-dot-in { to { transform: scale(1); } }
|
||||
@keyframes sg-dot-out { from { transform: scale(1); opacity: 1; } to { transform: scale(0.55); opacity: 0; } }
|
||||
.sym { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.62); animation: sg-sym-in 420ms ease-in-out forwards, sg-sym-out 900ms ease-in-out forwards; }
|
||||
@keyframes sg-sym-in { to { opacity: 1; transform: scale(1); } }
|
||||
@keyframes sg-sym-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.55); } }
|
||||
.g { stroke-dasharray: 400; stroke-dashoffset: 400; animation: sg-draw 1600ms ease-in-out forwards; }
|
||||
@keyframes sg-draw { to { stroke-dashoffset: 0; } }
|
||||
.frame { opacity: 0; animation: sg-fade 900ms ease-out forwards; }
|
||||
@keyframes sg-fade { to { opacity: var(--frame-opacity, 0.45); } }
|
||||
.d-s { animation-delay: 0ms, 540ms; }
|
||||
.sym-s { animation-delay: 540ms, 1640ms; }
|
||||
.g-s { animation-delay: 1640ms; }
|
||||
.d-u { animation-delay: 180ms, 720ms; }
|
||||
.sym-u { animation-delay: 720ms, 1820ms; }
|
||||
.g-u { animation-delay: 1820ms; }
|
||||
.d-c { animation-delay: 360ms, 900ms; }
|
||||
.sym-c { animation-delay: 900ms, 2000ms; }
|
||||
.g-c { animation-delay: 2000ms; }
|
||||
.d-h { animation-delay: 540ms, 1080ms; }
|
||||
.sym-h { animation-delay: 1080ms, 2180ms; }
|
||||
.g-h { animation-delay: 2180ms; }
|
||||
.frame { animation-delay: 1640ms; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.d, .sym { display: none; }
|
||||
.g { animation: none; stroke-dashoffset: 0; }
|
||||
.frame { animation: none; opacity: 0.45; }
|
||||
}
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#f7f8fa"/>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#1a5c38" stroke-width="3.5" opacity="0.45"/>
|
||||
<g transform="translate(60,59.25)"><g class="d d-s"><circle r="24" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(38,39.71) scale(0.4247)"><g class="sym sym-s"><path d="M4.3 -0.10000000000000853H12.5Q15.5 -0.20000000000000284 18.0 1.3999999999999986Q20.5 3.0 21.700000000000003 5.599999999999994H95.80000000000001Q99.2 5.599999999999994 101.4 8.399999999999999Q103.60000000000001 11.200000000000003 102.7 14.700000000000003L95.30000000000001 42.199999999999996Q94.2 46.6 90.7 49.2Q87.2 51.8 82.80000000000001 51.8H30.8L31.700000000000003 56.9Q32.0 58.4 33.2 59.4Q34.4 60.4 36.0 60.5H88.0Q89.80000000000001 60.599999999999994 91.0 61.8Q92.2 63.0 92.30000000000001 64.8Q92.2 66.6 91.0 67.8Q89.80000000000001 69.0 88.0 69.1H36.0Q31.400000000000002 69.2 27.800000000000004 66.2Q24.200000000000003 63.2 23.3 58.599999999999994L14.0 9.700000000000003Q13.8 8.5 12.5 8.5H4.3Q2.4000000000000004 8.399999999999991 1.2000000000000002 7.199999999999996Q0.0 6.0 0.0 4.199999999999996Q0.0 2.3999999999999915 1.2000000000000002 1.1999999999999957Q2.4000000000000004 0.0 4.3 -0.10000000000000853ZM23.1 83.5Q23.1 79.9 25.6 77.4Q28.1 74.9 31.700000000000003 74.9Q35.2 74.9 37.800000000000004 77.4Q40.400000000000006 79.9 40.400000000000006 83.5Q40.400000000000006 87.0 37.800000000000004 89.6Q35.2 92.2 31.700000000000003 92.2Q28.1 92.2 25.6 89.6Q23.1 87.0 23.1 83.5ZM83.7 74.9Q87.30000000000001 74.9 89.80000000000001 77.4Q92.30000000000001 79.9 92.30000000000001 83.5Q92.30000000000001 87.0 89.80000000000001 89.6Q87.30000000000001 92.2 83.7 92.2Q80.2 92.2 77.6 89.6Q75.0 87.0 75.0 83.5Q75.0 79.9 77.6 77.4Q80.2 74.9 83.7 74.9Z" fill="#1a5c38" filter="url(#sg-sym-glow)"/></g></g>
|
||||
<g transform="translate(137,59.25)"><g class="d d-u"><circle r="24" fill="#b83670"/></g></g>
|
||||
<g transform="translate(120.6,37.35) scale(0.4762)"><g class="sym sym-u"><path d="M55.2 43.599999999999994Q69.0 46.8 67.7 61.599999999999994Q66.9 71.2 60.5 75.2Q54.1 79.2 42.0 79.8V92.2H33.2V80.2Q28.700000000000003 80.2 26.3 80.0V92.2H17.5V79.8H0.0L1.7000000000000002 69.4Q8.4 69.6 9.5 69.2Q11.0 68.6 11.3 66.6V27.4Q11.100000000000001 25.799999999999997 10.3 24.999999999999996Q9.5 24.199999999999996 8.3 23.799999999999997Q7.1000000000000005 23.4 5.300000000000001 23.4Q3.5 23.4 1.4000000000000001 23.4Q0.5 23.4 0.0 23.4V14.200000000000003H17.5V-0.20000000000000284H26.3V13.799999999999997Q28.6 13.799999999999997 33.2 13.799999999999997V-0.20000000000000284H42.0V14.200000000000003Q51.2 15.0 56.6 18.4Q62.0 21.799999999999997 62.7 29.0Q63.6 39.199999999999996 55.2 43.599999999999994ZM26.5 24.0V41.599999999999994Q26.700000000000003 41.599999999999994 28.5 41.599999999999994Q30.3 41.599999999999994 31.1 41.599999999999994Q32.0 41.599999999999994 33.900000000000006 41.5Q35.800000000000004 41.4 37.0 41.2Q38.2 41.0 39.900000000000006 40.599999999999994Q41.7 40.199999999999996 42.7 39.5Q43.7 38.8 44.7 38.0Q45.7 37.199999999999996 46.300000000000004 35.8Q46.800000000000004 34.4 46.800000000000004 32.8Q46.800000000000004 30.799999999999997 46.0 29.199999999999996Q45.1 27.599999999999994 43.5 26.599999999999994Q41.900000000000006 25.599999999999994 40.5 25.0Q39.1 24.4 36.5 24.199999999999996Q33.9 24.0 32.7 24.0Q31.5 24.0 29.1 24.0Q26.700000000000003 24.0 26.5 24.0ZM26.5 69.4Q26.900000000000002 69.6 28.900000000000002 69.6Q30.900000000000002 69.6 31.900000000000002 69.6Q33.1 69.6 35.300000000000004 69.4Q37.5 69.4 38.900000000000006 69.1Q40.300000000000004 68.8 42.400000000000006 68.4Q44.5 68.0 45.7 67.2Q46.900000000000006 66.4 48.1 65.4Q49.300000000000004 64.4 49.900000000000006 63.0Q50.5 61.599999999999994 50.5 59.8Q50.5 57.599999999999994 49.5 55.8Q48.5 54.0 46.7 53.0Q44.7 52.0 43.0 51.4Q41.300000000000004 50.8 38.300000000000004 50.599999999999994Q35.300000000000004 50.4 33.9 50.2Q32.5 50.2 29.6 50.2Q26.700000000000003 50.2 26.5 50.2Z" fill="#b83670" filter="url(#sg-sym-glow)"/></g></g>
|
||||
<g transform="translate(60,141)"><g class="d d-c"><circle r="24" fill="#176a92"/></g></g>
|
||||
<g transform="translate(38,119) scale(0.4793)"><g class="sym sym-c"><path d="M70.9 12.599999999999994Q62.300000000000004 12.599999999999994 57.0 15.099999999999994Q51.7 12.599999999999994 45.85 12.599999999999994Q40.0 12.599999999999994 34.800000000000004 15.099999999999994Q29.5 12.599999999999994 20.900000000000002 12.599999999999994Q15.200000000000001 12.599999999999994 10.0 21.599999999999994Q5.7 28.699999999999996 2.7 39.699999999999996Q0.0 49.3 0.0 54.4Q0.0 56.9 3.7 59.05Q7.4 61.2 13.100000000000001 62.2Q15.200000000000001 69.2 23.700000000000003 74.0Q32.2 78.8 43.800000000000004 79.4V61.4Q37.6 57.5 37.5 54.4Q37.5 51.7 41.800000000000004 50.7Q43.800000000000004 50.099999999999994 45.900000000000006 50.099999999999994L48.0 50.3Q50.5 50.7 52.1 51.5Q54.2 52.5 54.300000000000004 54.4Q54.300000000000004 57.5 48.0 61.4V79.4Q59.5 78.8 68.05000000000001 74.0Q76.60000000000001 69.2 78.7 62.2Q84.4 61.2 88.10000000000001 59.05Q91.80000000000001 56.9 91.80000000000001 54.4Q91.80000000000001 49.3 89.10000000000001 39.699999999999996Q86.2 28.799999999999997 81.80000000000001 21.599999999999994Q76.60000000000001 12.599999999999994 70.9 12.599999999999994ZM13.3 53.8Q10.600000000000001 53.3 8.4 52.3Q9.0 46.8 11.3 39.4Q13.600000000000001 32.8 16.450000000000003 27.299999999999997Q19.3 21.799999999999997 21.1 21.0Q23.200000000000003 21.0 26.400000000000002 21.4H26.6Q20.900000000000002 27.799999999999997 17.0 38.4Q14.5 45.6 13.3 53.8ZM33.4 46.0Q31.6 46.0 30.450000000000003 44.849999999999994Q29.3 43.699999999999996 29.3 41.89999999999999Q29.3 40.099999999999994 30.450000000000003 38.849999999999994Q31.6 37.599999999999994 33.400000000000006 37.599999999999994Q35.2 37.599999999999994 36.35 38.849999999999994Q37.5 40.099999999999994 37.5 41.89999999999999Q37.5 43.699999999999996 36.35 44.849999999999994Q35.2 46.0 33.4 46.0ZM58.400000000000006 46.0Q56.6 46.0 55.45 44.849999999999994Q54.300000000000004 43.699999999999996 54.300000000000004 41.89999999999999Q54.300000000000004 40.099999999999994 55.45 38.849999999999994Q56.6 37.599999999999994 58.400000000000006 37.599999999999994Q60.2 37.599999999999994 61.35 38.849999999999994Q62.5 40.099999999999994 62.5 41.89999999999999Q62.5 43.699999999999996 61.35 44.849999999999994Q60.2 46.0 58.400000000000006 46.0ZM78.5 53.8Q77.30000000000001 45.6 74.8 38.4Q70.9 27.9 65.2 21.4H65.4Q68.5 21.0 70.7 21.0Q72.5 21.799999999999997 75.30000000000001 27.249999999999996Q78.10000000000001 32.699999999999996 80.5 39.4Q82.80000000000001 46.9 83.4 52.3Q81.4 53.3 78.5 53.8Z" fill="#176a92" filter="url(#sg-sym-glow)"/></g></g>
|
||||
<g transform="translate(137,141)"><g class="d d-h"><circle r="24" fill="#12857e"/></g></g>
|
||||
<g transform="translate(115.7,113.6) scale(0.5962)"><g class="sym sym-h"><path d="M35.800000000000004 41.9Q37.6 41.9 38.75 43.05Q39.900000000000006 44.199999999999996 39.900000000000006 46.0Q39.900000000000006 47.8 38.75 48.949999999999996Q37.6 50.099999999999994 35.8 50.099999999999994Q34.0 50.099999999999994 32.85 48.949999999999996Q31.700000000000003 47.8 31.700000000000003 46.0Q31.700000000000003 44.199999999999996 32.85 43.05Q34.0 41.9 35.800000000000004 41.9ZM3.4000000000000004 13.599999999999994Q7.9 9.099999999999994 16.650000000000002 10.749999999999993Q25.400000000000002 12.399999999999991 35.800000000000004 19.199999999999996Q46.2 12.399999999999991 54.95 10.749999999999993Q63.7 9.099999999999994 68.2 13.599999999999994Q72.7 18.099999999999994 71.05000000000001 26.849999999999994Q69.4 35.599999999999994 62.6 46.0Q69.4 56.4 71.05000000000001 65.15Q72.7 73.9 68.2 78.4Q63.7 82.9 54.95 81.25Q46.2 79.6 35.800000000000004 72.8Q25.400000000000002 79.6 16.650000000000002 81.25Q7.9 82.9 3.4000000000000004 78.4Q-1.1 73.9 0.55 65.15Q2.2 56.4 9.0 46.0Q2.2 35.599999999999994 0.55 26.849999999999994Q-1.1 18.099999999999994 3.4000000000000004 13.599999999999994ZM50.6 31.199999999999996Q54.1 34.9 57.7 39.199999999999996Q62.0 32.4 63.25 27.099999999999998Q64.5 21.799999999999997 62.25 19.549999999999997Q60.0 17.299999999999997 54.75 18.549999999999997Q49.5 19.799999999999997 42.6 24.099999999999994Q46.900000000000006 27.699999999999996 50.6 31.199999999999996ZM21.0 60.8Q17.5 57.099999999999994 13.9 52.8Q9.600000000000001 59.599999999999994 8.350000000000001 64.9Q7.1000000000000005 70.2 9.350000000000001 72.45Q11.600000000000001 74.7 16.85 73.45Q22.1 72.2 29.0 67.9Q24.700000000000003 64.3 21.0 60.8ZM9.200000000000001 19.4Q7.1000000000000005 21.699999999999996 8.350000000000001 26.999999999999996Q9.600000000000001 32.3 13.9 39.199999999999996Q17.400000000000002 34.9 21.050000000000004 31.249999999999996Q24.700000000000003 27.599999999999994 29.0 24.099999999999994Q22.200000000000003 19.799999999999997 16.85 18.549999999999997Q11.5 17.299999999999997 9.200000000000001 19.4ZM27.0 54.8Q31.1 58.9 35.800000000000004 62.8Q40.5 58.9 44.6 54.8Q48.7 50.7 52.6 46.0Q48.7 41.3 44.6 37.199999999999996Q40.5 33.099999999999994 35.800000000000004 29.199999999999996Q31.1 33.099999999999994 27.0 37.199999999999996Q22.900000000000002 41.3 19.0 46.0Q22.900000000000002 50.7 27.0 54.8ZM62.400000000000006 72.6Q64.5 70.3 63.25 65.0Q62.0 59.7 57.7 52.8Q54.2 57.099999999999994 50.550000000000004 60.75Q46.900000000000006 64.4 42.6 67.9Q49.400000000000006 72.2 54.75 73.45Q60.1 74.7 62.400000000000006 72.6Z" fill="#12857e" filter="url(#sg-sym-glow)"/></g></g>
|
||||
<path class="g g-s" d="M 78,36 H 36 V 58 H 78 V 82 H 36" fill="none" stroke="#1a5c38" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#b83670" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#176a92" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#12857e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 34 KiB |
@@ -1,38 +1,8 @@
|
||||
<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>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="200" height="200" rx="26" fill="#0a0a0a"/>
|
||||
|
||||
<!-- 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 - green (5.1:1) -->
|
||||
<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 - rose (6.5:1) -->
|
||||
<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 - blue (7.9:1) -->
|
||||
<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 - teal (9.5:1) -->
|
||||
<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"/>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#45c99e" stroke-width="3.5" opacity="0.7"/>
|
||||
<path class="g g-s" 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" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#e8689e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#4aade0" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#3ad4c6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.0 KiB |
@@ -1,131 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
viewBox="0 0 632.87714 200"
|
||||
version="1.1"
|
||||
id="svg642"
|
||||
sodipodi:docname="clean_dark_w_text.svg"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
width="632.87714"
|
||||
height="200"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview644"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.641875"
|
||||
inkscape:cx="222.00584"
|
||||
inkscape:cy="239.14314"
|
||||
inkscape:window-width="1452"
|
||||
inkscape:window-height="1233"
|
||||
inkscape:window-x="4173"
|
||||
inkscape:window-y="670"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg642" />
|
||||
<defs
|
||||
id="defs628">
|
||||
<filter
|
||||
id="glow"
|
||||
x="-0.026918605"
|
||||
y="-0.026918605"
|
||||
width="1.0538372"
|
||||
height="1.0538372">
|
||||
<feGaussianBlur
|
||||
stdDeviation="1.2"
|
||||
result="blur"
|
||||
id="feGaussianBlur619" />
|
||||
<feMerge
|
||||
id="feMerge625">
|
||||
<feMergeNode
|
||||
in="blur"
|
||||
id="feMergeNode621" />
|
||||
<feMergeNode
|
||||
in="SourceGraphic"
|
||||
id="feMergeNode623" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Background -->
|
||||
<!-- Border -->
|
||||
<rect
|
||||
width="632.87714"
|
||||
height="200"
|
||||
fill="#0a0a0a"
|
||||
id="rect2"
|
||||
x="0"
|
||||
y="0"
|
||||
style="stroke-width:1.77887"
|
||||
ry="22.926825" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-weight:bold;font-size:84px;line-height:81.6378px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, Bold';fill:#ffffff;stroke:#ffffff;stroke-width:15"
|
||||
x="206.31992"
|
||||
y="88.012764"
|
||||
id="text1510"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan1508"
|
||||
x="206.31992"
|
||||
y="88.012764"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#ffffff;fill-opacity:1;stroke:none">Such</tspan><tspan
|
||||
sodipodi:role="line"
|
||||
x="206.31992"
|
||||
y="169.65056"
|
||||
id="tspan1512"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#ffffff;fill-opacity:1;stroke:none">Software</tspan></text>
|
||||
<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"
|
||||
id="rect632" />
|
||||
<!-- S - green (5.1:1) -->
|
||||
<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"
|
||||
id="path634" />
|
||||
<!-- U - rose (6.5:1) -->
|
||||
<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"
|
||||
id="path636" />
|
||||
<!-- C - blue (7.9:1) -->
|
||||
<path
|
||||
d="M 78,118 H 36 v 46 h 42"
|
||||
fill="none"
|
||||
stroke="#4aade0"
|
||||
stroke-width="14"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
id="path638" />
|
||||
<!-- H - teal (9.5:1) -->
|
||||
<path
|
||||
d="m 118,118 v 46 m 44,-46 v 46 m -44,-23 h 44"
|
||||
fill="none"
|
||||
stroke="#45c99e"
|
||||
stroke-width="14"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
id="path640" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 200">
|
||||
<rect width="620" height="200" rx="26" fill="#0a0a0a"/>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#45c99e" stroke-width="3.5" opacity="0.7"/>
|
||||
<path class="g g-s" 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" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#e8689e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#4aade0" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#3ad4c6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<text x="220" y="88" font-family="'Manrope', 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-weight="800" font-size="78" fill="#f7f8fa" letter-spacing="1">Such</text>
|
||||
<text x="220" y="168" font-family="'Manrope', 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-weight="800" font-size="78" fill="#f7f8fa" letter-spacing="1">Software</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 1.4 KiB |
@@ -1,28 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<!-- Background -->
|
||||
<rect width="200" height="200" rx="26" fill="#f7f8fa"/>
|
||||
|
||||
<!-- Border -->
|
||||
<rect x="14" y="14" width="172" height="172" rx="16" fill="none"
|
||||
stroke="#1a5c38" stroke-width="3.5" opacity="0.45"/>
|
||||
|
||||
<!-- S - deep forest (7.5:1) -->
|
||||
<path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
|
||||
fill="none" stroke="#1a5c38" stroke-width="14"
|
||||
stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
<!-- U - deep rose (5.2:1) -->
|
||||
<path d="m 118,36 v 34 c 0,12.15 9.85,16 22,16 12.15,0 22,-3.85 22,-16 V 36"
|
||||
fill="none" stroke="#b83670" stroke-width="14"
|
||||
stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
<!-- C - deep blue (4.9:1) -->
|
||||
<path d="M 78,118 H 36 V 164 H 78"
|
||||
fill="none" stroke="#1a749e" stroke-width="14"
|
||||
stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
<!-- H - deep teal (4.5:1) -->
|
||||
<path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
|
||||
fill="none" stroke="#278063" stroke-width="14"
|
||||
stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#1a5c38" stroke-width="3.5" opacity="0.45"/>
|
||||
<path class="g g-s" d="M 78,36 H 36 V 58 H 78 V 82 H 36" fill="none" stroke="#1a5c38" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#b83670" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#176a92" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#12857e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.0 KiB |
@@ -1,117 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
viewBox="0 0 632.87714 200"
|
||||
version="1.1"
|
||||
id="svg1027"
|
||||
sodipodi:docname="clean_light_w_text.svg"
|
||||
width="632.87714"
|
||||
height="200"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1031" />
|
||||
<sodipodi:namedview
|
||||
id="namedview1029"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.28375"
|
||||
inkscape:cx="172.54138"
|
||||
inkscape:cy="199.80526"
|
||||
inkscape:window-width="1452"
|
||||
inkscape:window-height="1233"
|
||||
inkscape:window-x="3840"
|
||||
inkscape:window-y="840"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg1027" />
|
||||
<!-- Background -->
|
||||
<rect
|
||||
width="632.87714"
|
||||
height="200"
|
||||
fill="#0a0a0a"
|
||||
id="rect2"
|
||||
x="0"
|
||||
y="0"
|
||||
style="fill:#ffffff;stroke-width:1.77887"
|
||||
ry="22.926825" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-weight:bold;font-size:84px;line-height:81.6378px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, Bold';fill:#000000;stroke:#ffffff;stroke-width:15"
|
||||
x="206.31992"
|
||||
y="88.012756"
|
||||
id="text1510"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan1508"
|
||||
x="206.31992"
|
||||
y="88.012756"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#000000;fill-opacity:1;stroke:none">Such</tspan><tspan
|
||||
sodipodi:role="line"
|
||||
x="206.31992"
|
||||
y="169.65056"
|
||||
id="tspan1512"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#000000;fill-opacity:1;stroke:none">Software</tspan></text>
|
||||
<rect
|
||||
width="200"
|
||||
height="200"
|
||||
rx="26"
|
||||
fill="#f7f8fa"
|
||||
id="rect1015"
|
||||
x="0"
|
||||
y="0" />
|
||||
<!-- Border -->
|
||||
<rect
|
||||
x="14"
|
||||
y="14"
|
||||
width="172"
|
||||
height="172"
|
||||
rx="16"
|
||||
fill="none"
|
||||
stroke="#1a5c38"
|
||||
stroke-width="3.5"
|
||||
opacity="0.45"
|
||||
id="rect1017" />
|
||||
<!-- S - deep forest (7.5:1) -->
|
||||
<path
|
||||
d="M 78,36 H 36 V 58 H 78 V 82 H 36"
|
||||
fill="none"
|
||||
stroke="#1a5c38"
|
||||
stroke-width="14"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
id="path1019" />
|
||||
<!-- U - deep rose (5.2:1) -->
|
||||
<path
|
||||
d="m 118,36 v 34 c 0,12.15 9.85,16 22,16 12.15,0 22,-3.85 22,-16 V 36"
|
||||
fill="none"
|
||||
stroke="#b83670"
|
||||
stroke-width="14"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
id="path1021" />
|
||||
<!-- C - deep blue (4.9:1) -->
|
||||
<path
|
||||
d="M 78,118 H 36 v 46 h 42"
|
||||
fill="none"
|
||||
stroke="#1a749e"
|
||||
stroke-width="14"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
id="path1023" />
|
||||
<!-- H - deep teal (4.5:1) -->
|
||||
<path
|
||||
d="m 118,118 v 46 m 44,-46 v 46 m -44,-23 h 44"
|
||||
fill="none"
|
||||
stroke="#278063"
|
||||
stroke-width="14"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
id="path1025" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 200">
|
||||
<rect width="620" height="200" rx="26" fill="#f7f8fa"/>
|
||||
<rect class="frame" x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#1a5c38" stroke-width="3.5" opacity="0.45"/>
|
||||
<path class="g g-s" d="M 78,36 H 36 V 58 H 78 V 82 H 36" fill="none" stroke="#1a5c38" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#b83670" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#176a92" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#12857e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<text x="220" y="88" font-family="'Manrope', 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-weight="800" font-size="78" fill="#0a0a14" letter-spacing="1">Such</text>
|
||||
<text x="220" y="168" font-family="'Manrope', 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-weight="800" font-size="78" fill="#0a0a14" letter-spacing="1">Software</text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 5.1 KiB |
@@ -1,106 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
viewBox="0 0 200 200"
|
||||
version="1.1"
|
||||
id="svg25"
|
||||
sodipodi:docname="favicon_dark.svg"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview27"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="5.135"
|
||||
inkscape:cx="71.178189"
|
||||
inkscape:cy="100"
|
||||
inkscape:window-width="3840"
|
||||
inkscape:window-height="2091"
|
||||
inkscape:window-x="3840"
|
||||
inkscape:window-y="32"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg25" />
|
||||
<defs
|
||||
id="defs11">
|
||||
<filter
|
||||
id="glow"
|
||||
x="-0.026918605"
|
||||
y="-0.026918605"
|
||||
width="1.0538372"
|
||||
height="1.0538372">
|
||||
<feGaussianBlur
|
||||
stdDeviation="1.2"
|
||||
result="blur"
|
||||
id="feGaussianBlur2" />
|
||||
<feMerge
|
||||
id="feMerge8">
|
||||
<feMergeNode
|
||||
in="blur"
|
||||
id="feMergeNode4" />
|
||||
<feMergeNode
|
||||
in="SourceGraphic"
|
||||
id="feMergeNode6" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Background -->
|
||||
<rect
|
||||
width="200"
|
||||
height="200"
|
||||
rx="26"
|
||||
fill="#0a0a0a"
|
||||
id="rect13" />
|
||||
<!-- 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"
|
||||
id="rect15" />
|
||||
<!-- S - green (5.1:1) -->
|
||||
<!-- U - rose (6.5:1) -->
|
||||
<!-- C - blue (7.9:1) -->
|
||||
<!-- H - teal (9.5:1) -->
|
||||
<ellipse
|
||||
style="fill:#35925c;stroke-width:14.0117;fill-opacity:1"
|
||||
id="path1890"
|
||||
cx="57"
|
||||
cy="59"
|
||||
rx="30.173216"
|
||||
ry="29.420959" />
|
||||
<ellipse
|
||||
style="fill:#e8689e;stroke-width:14.0117;fill-opacity:1"
|
||||
id="path1890-5"
|
||||
cx="140"
|
||||
cy="59"
|
||||
rx="30.173216"
|
||||
ry="29.420959" />
|
||||
<ellipse
|
||||
style="fill:#4aade0;stroke-width:14.0117;fill-opacity:1"
|
||||
id="path1890-3"
|
||||
cx="57"
|
||||
cy="141"
|
||||
rx="30.173216"
|
||||
ry="29.420959" />
|
||||
<ellipse
|
||||
style="fill:#45c99e;stroke-width:14.0117;fill-opacity:1"
|
||||
id="path1890-56"
|
||||
cx="140"
|
||||
cy="141"
|
||||
rx="30.173216"
|
||||
ry="29.420959" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<rect width="200" height="200" rx="26" fill="#0a0a0a"/>
|
||||
<g transform="translate(100,100) scale(1.24) translate(-100,-100)">
|
||||
<path class="g g-s" 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" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#e8689e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#4aade0" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#3ad4c6" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 975 B |
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<rect width="200" height="200" rx="26" fill="#0a0a0a"/>
|
||||
<g transform="translate(100,100) scale(1.24) translate(-100,-100)">
|
||||
<g transform="translate(60,59.25)"><g class="d d-s"><circle r="24" fill="#35925c"/></g></g>
|
||||
<g transform="translate(137,59.25)"><g class="d d-u"><circle r="24" fill="#e8689e"/></g></g>
|
||||
<g transform="translate(60,141)"><g class="d d-c"><circle r="24" fill="#4aade0"/></g></g>
|
||||
<g transform="translate(137,141)"><g class="d d-h"><circle r="24" fill="#3ad4c6"/></g></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 587 B |
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<rect width="200" height="200" rx="26" fill="#f7f8fa"/>
|
||||
<g transform="translate(100,100) scale(1.24) translate(-100,-100)">
|
||||
<g transform="translate(60,59.25)"><g class="d d-s"><circle r="24" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(137,59.25)"><g class="d d-u"><circle r="24" fill="#b83670"/></g></g>
|
||||
<g transform="translate(60,141)"><g class="d d-c"><circle r="24" fill="#176a92"/></g></g>
|
||||
<g transform="translate(137,141)"><g class="d d-h"><circle r="24" fill="#12857e"/></g></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 587 B |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 5.1 KiB |
@@ -1,80 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
viewBox="0 0 200 200"
|
||||
version="1.1"
|
||||
id="svg214"
|
||||
sodipodi:docname="favicon_light.svg"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs218" />
|
||||
<sodipodi:namedview
|
||||
id="namedview216"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="5.135"
|
||||
inkscape:cx="71.178189"
|
||||
inkscape:cy="100"
|
||||
inkscape:window-width="3840"
|
||||
inkscape:window-height="2091"
|
||||
inkscape:window-x="3840"
|
||||
inkscape:window-y="32"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg214" />
|
||||
<!-- Background -->
|
||||
<rect
|
||||
width="200"
|
||||
height="200"
|
||||
rx="26"
|
||||
fill="#f7f8fa"
|
||||
id="rect202" />
|
||||
<!-- Border -->
|
||||
<rect
|
||||
x="14"
|
||||
y="14"
|
||||
width="172"
|
||||
height="172"
|
||||
rx="16"
|
||||
fill="none"
|
||||
stroke="#1a5c38"
|
||||
stroke-width="3.5"
|
||||
opacity="0.45"
|
||||
id="rect204" />
|
||||
<!-- S - deep forest (7.5:1) -->
|
||||
<!-- U - deep rose (5.2:1) -->
|
||||
<!-- C - deep blue (4.9:1) -->
|
||||
<!-- H - deep teal (4.5:1) -->
|
||||
<circle
|
||||
style="fill:#1a5c38;stroke-width:15;fill-opacity:1"
|
||||
id="path497"
|
||||
cx="57"
|
||||
cy="59"
|
||||
r="28.221895" />
|
||||
<circle
|
||||
style="fill:#b83670;stroke-width:15;fill-opacity:1"
|
||||
id="path497-3"
|
||||
cx="140"
|
||||
cy="59"
|
||||
r="28.221895" />
|
||||
<circle
|
||||
style="fill:#1a749e;stroke-width:15;fill-opacity:1"
|
||||
id="path497-6"
|
||||
cx="57"
|
||||
cy="141"
|
||||
r="28.221895" />
|
||||
<circle
|
||||
style="fill:#278063;stroke-width:15;fill-opacity:1"
|
||||
id="path497-7"
|
||||
cx="140"
|
||||
cy="141"
|
||||
r="28.221895" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<rect width="200" height="200" rx="26" fill="#f7f8fa"/>
|
||||
<g transform="translate(100,100) scale(1.24) translate(-100,-100)">
|
||||
<path class="g g-s" d="M 78,36 H 36 V 58 H 78 V 82 H 36" fill="none" stroke="#1a5c38" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-u" d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" fill="none" stroke="#b83670" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
<path class="g g-c" d="M 78,118 H 36 V 164 H 78" fill="none" stroke="#176a92" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(3,0)"/>
|
||||
<path class="g g-h" d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" fill="none" stroke="#12857e" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3,0)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 975 B |
@@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<style>
|
||||
.d { transform-box: fill-box; transform-origin: center;
|
||||
animation: sg-breathe 3.6s ease-in-out infinite; }
|
||||
@keyframes sg-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
|
||||
.d-s { animation-delay: 0s; }
|
||||
.d-u { animation-delay: 0.45s; }
|
||||
.d-c { animation-delay: 0.9s; }
|
||||
.d-h { animation-delay: 1.35s; }
|
||||
@media (prefers-reduced-motion: reduce) { .d { animation: none; } }
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#0a0a0a"/>
|
||||
<g transform="translate(100,100) scale(1.24) translate(-100,-100)">
|
||||
<g transform="translate(60,59.25)"><g class="d d-s"><circle r="24" fill="#35925c"/></g></g>
|
||||
<g transform="translate(137,59.25)"><g class="d d-u"><circle r="24" fill="#e8689e"/></g></g>
|
||||
<g transform="translate(60,141)"><g class="d d-c"><circle r="24" fill="#4aade0"/></g></g>
|
||||
<g transform="translate(137,141)"><g class="d d-h"><circle r="24" fill="#3ad4c6"/></g></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<style>
|
||||
.d { transform-box: fill-box; transform-origin: center;
|
||||
animation: sg-breathe 3.6s ease-in-out infinite; }
|
||||
@keyframes sg-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
|
||||
.d-s { animation-delay: 0s; }
|
||||
.d-u { animation-delay: 0.45s; }
|
||||
.d-c { animation-delay: 0.9s; }
|
||||
.d-h { animation-delay: 1.35s; }
|
||||
@media (prefers-reduced-motion: reduce) { .d { animation: none; } }
|
||||
</style>
|
||||
<rect width="200" height="200" rx="26" fill="#f7f8fa"/>
|
||||
<g transform="translate(100,100) scale(1.24) translate(-100,-100)">
|
||||
<g transform="translate(60,59.25)"><g class="d d-s"><circle r="24" fill="#1a5c38"/></g></g>
|
||||
<g transform="translate(137,59.25)"><g class="d d-u"><circle r="24" fill="#b83670"/></g></g>
|
||||
<g transform="translate(60,141)"><g class="d d-c"><circle r="24" fill="#176a92"/></g></g>
|
||||
<g transform="translate(137,141)"><g class="d d-h"><circle r="24" fill="#12857e"/></g></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -1,18 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" role="img" aria-label="Such Software">
|
||||
<defs>
|
||||
<filter id="splash-glow" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur stdDeviation="1.6" result="b"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="b"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect x="14" y="14" width="172" height="172" rx="16" fill="none" stroke="#22d3ee" stroke-width="3.5" filter="url(#splash-glow)" opacity="0.45"/>
|
||||
<g fill="none" stroke-width="14" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M 78,36 H 36 V 58 H 78 V 82 H 36" stroke="#35c98e"/>
|
||||
<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" stroke="#e8689e"/>
|
||||
<path d="M 78,118 H 36 V 164 H 78" stroke="#4aade0"/>
|
||||
<path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" stroke="#45c99e"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" role="img" aria-label="Such Software"><defs><filter id="splash-glow" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur stdDeviation="1.6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect x="14" y="14" width="172" height="172" rx="12" fill="none" stroke="#45c99e" stroke-width="3.5" filter="url(#splash-glow)" opacity="0.45"/><g fill="none" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"><path d="M 78,36 H 36 V 58 H 78 V 82 H 36" stroke="#35925c" transform="translate(3,0)"/><path d="m 118,36 v 34 c 0,12.15 9.85,13 22,13 12.15,0 22,-3.1 22,-13 V 36" stroke="#e8689e" transform="translate(-3,0)"/><path d="M 78,118 H 36 V 164 H 78" stroke="#4aade0" transform="translate(3,0)"/><path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162" stroke="#3ad4c6" transform="translate(-3,0)"/></g></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 917 B After Width: | Height: | Size: 941 B |
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "Such Software",
|
||||
"short_name": "Such Software",
|
||||
"description": "Next-generation web applications engineered for scale, compliance, and performance.",
|
||||
"description": "A Kennett Square, PA software studio building custom online stores, web apps, mobile games, and Monero & crypto tools.",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#000000",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#0a0a0a",
|
||||
"theme_color": "#0a0a0a",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/images/branding/favicon_light.svg",
|
||||
@@ -13,9 +13,20 @@
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/images/branding/favicon_light.png",
|
||||
"src": "/images/branding/icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/images/branding/icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/images/branding/maskable-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -115,18 +115,8 @@ export default function LinksPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-12 mb-6 motion-reduce:hidden">
|
||||
<img
|
||||
src="/images/animations/anim1_pulse_light.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="w-20 h-20 opacity-50 block dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/images/animations/anim1_pulse.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="w-20 h-20 opacity-50 hidden dark:block"
|
||||
/>
|
||||
<object data="/images/animations/games_pulse_light.svg" type="image/svg+xml" aria-hidden="true" className="w-20 h-20 opacity-50 block dark:hidden pointer-events-none"></object>
|
||||
<object data="/images/animations/games_pulse.svg" type="image/svg+xml" aria-hidden="true" className="w-20 h-20 opacity-50 hidden dark:block pointer-events-none"></object>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
|
||||
@@ -30,18 +30,8 @@ export default function BlogPage() {
|
||||
|
||||
{/* Animated accent */}
|
||||
<div className="flex justify-center mb-12 motion-reduce:hidden">
|
||||
<img
|
||||
src="/images/animations/anim_type_v4_light.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="w-24 h-24 opacity-60 block dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/images/animations/anim_type_v4.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="w-24 h-24 opacity-60 hidden dark:block"
|
||||
/>
|
||||
<object data="/images/animations/anim_type_v4_light.svg" type="image/svg+xml" aria-hidden="true" className="w-24 h-24 opacity-60 block dark:hidden pointer-events-none"></object>
|
||||
<object data="/images/animations/anim_type_v4.svg" type="image/svg+xml" aria-hidden="true" className="w-24 h-24 opacity-60 hidden dark:block pointer-events-none"></object>
|
||||
</div>
|
||||
|
||||
{posts.length === 0 ? (
|
||||
|
||||
@@ -286,14 +286,29 @@
|
||||
/* Hero title: an animated gradient sheen. LCP-safe — the text paints immediately with the
|
||||
gradient; only the gradient POSITION animates, which never delays the largest paint. The
|
||||
global reduced-motion rule freezes it to the base gradient. */
|
||||
/* The brand's four-colour system (S green, U magenta, C blue, H teal), one per glyph.
|
||||
Light theme uses the light palette; .dark swaps in the dark palette, which is the
|
||||
same hues lifted for contrast on near-black -- from packs/such-software/pack.json. */
|
||||
.hero-title {
|
||||
background-image: linear-gradient(110deg, #22d3ee 0%, #3b82f6 30%, #7dd3fc 50%, #3b82f6 70%, #22d3ee 100%);
|
||||
background-image: linear-gradient(110deg, #1a5c38 0%, #b83670 30%, #176a92 55%, #12857e 80%, #1a5c38 100%);
|
||||
background-size: 220% auto;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
animation: hero-sheen 9s ease-in-out infinite;
|
||||
}
|
||||
.dark .hero-title {
|
||||
background-image: linear-gradient(110deg, #35925c 0%, #e8689e 30%, #4aade0 55%, #3ad4c6 80%, #35925c 100%);
|
||||
}
|
||||
.brand-gradient-text {
|
||||
background-image: linear-gradient(90deg, #1a5c38, #b83670, #176a92, #12857e);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.dark .brand-gradient-text {
|
||||
background-image: linear-gradient(90deg, #35925c, #e8689e, #4aade0, #3ad4c6);
|
||||
}
|
||||
@keyframes hero-sheen {
|
||||
0%, 100% { background-position: 0% center; }
|
||||
50% { background-position: 100% center; }
|
||||
|
||||
@@ -58,8 +58,8 @@ const structuredData = {
|
||||
"@type": "Organization",
|
||||
name: "Such Software LLC",
|
||||
url: "https://such.software",
|
||||
logo: "https://such.software/images/branding/clean_dark_w_text.svg",
|
||||
description: "E-commerce infrastructure, custom app development, and accessible web applications. Engineered for scale, compliance, and performance.",
|
||||
logo: "https://such.software/images/branding/icon-512.png",
|
||||
description: "A Kennett Square, PA software studio building custom online stores, web apps, mobile games, and Monero & crypto tools.",
|
||||
address: {
|
||||
"@type": "PostalAddress",
|
||||
streetAddress: "110 E State St, Suite 300",
|
||||
|
||||
@@ -21,23 +21,23 @@ export default function Home() {
|
||||
{/* Decorative aura behind the title (aria-hidden, LCP-safe, motion-safe). */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="hero-aura pointer-events-none absolute left-1/2 top-24 sm:top-16 -z-10 h-64 w-[46rem] max-w-[92vw] rounded-full bg-cyan-400/25 blur-3xl"
|
||||
className="hero-aura pointer-events-none absolute left-1/2 top-24 sm:top-16 -z-10 h-64 w-[46rem] max-w-[92vw] rounded-full bg-[#12857e]/25 blur-3xl"
|
||||
/>
|
||||
<h1
|
||||
id="hero-title"
|
||||
className="hero-title text-4xl sm:text-5xl md:text-7xl font-bold mb-6 pb-2"
|
||||
style={{ maxWidth: "min(calc(90vw - 120px), 100%)" }}
|
||||
>
|
||||
<span className="block">Precision Engineering</span>
|
||||
<span className="block">for Everyone</span>
|
||||
<span className="block">Custom E-commerce,</span>
|
||||
<span className="block">Apps & Crypto Tools</span>
|
||||
</h1>
|
||||
<p className="max-w-2xl text-xl text-muted-foreground mb-8">
|
||||
Custom e-commerce, websites, apps, and consulting. Plus our own mobile apps and games. A software studio in Kennett Square, PA.
|
||||
Websites, games, payments, and consulting too — plus our own mobile apps. A software studio in Kennett Square, PA. Precision engineering for everyone.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4 mb-14">
|
||||
<Link href="/products">
|
||||
<Button size="lg" className="rounded-full shadow-lg shadow-cyan-500/25 hover:shadow-cyan-400/40 hover:scale-[1.03] transition-all">View Portfolio</Button>
|
||||
<Button size="lg" className="rounded-full shadow-lg shadow-[#12857e]/25 hover:shadow-[#3ad4c6]/40 hover:scale-[1.03] transition-all">View Portfolio</Button>
|
||||
</Link>
|
||||
<Link href="#contact">
|
||||
<Button variant="outline" size="lg" className="rounded-full hover:scale-[1.03] transition-all">Start a Project</Button>
|
||||
|
||||
@@ -4,11 +4,11 @@ import { ProductsGrid, type Product } from "@/components/portfolio/products-grid
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Products: Crypto Tools, Games & Commerce | Such Software",
|
||||
title: "Portfolio: Products & Projects | Such Software",
|
||||
description: "Explore Such Software's products: Wownerogue Monero roguelike, Neroswap crypto aggregator, Smirk wallet, headless Webshops, our mobile games, and nuclear games in development.",
|
||||
alternates: { canonical: "/products" },
|
||||
openGraph: {
|
||||
title: "Products: Crypto Tools, Games & Commerce | Such Software",
|
||||
title: "Portfolio: Products & Projects | Such Software",
|
||||
description: "Explore Such Software's products: Wownerogue Monero roguelike, Neroswap crypto aggregator, Smirk wallet, headless Webshops, our mobile games, and nuclear games in development.",
|
||||
type: "website",
|
||||
},
|
||||
@@ -146,31 +146,21 @@ export default function ProductsPage() {
|
||||
return (
|
||||
<main className="relative min-h-screen flex flex-col items-center bg-background text-foreground">
|
||||
<Header />
|
||||
<div id="main-content" className="z-10 w-full max-w-5xl mx-auto py-20 px-4 pb-24 md:pb-20">
|
||||
<div id="main-content" className="z-10 w-full max-w-6xl mx-auto py-20 px-4 pb-24 md:pb-20">
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-amber-400 to-purple-500">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6 brand-gradient-text">
|
||||
Portfolio
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
The tools and apps we have shipped, from commerce backends to consumer games, plus three nuclear-physics games in development.
|
||||
Products & projects — from commerce backends to consumer games, plus three nuclear-physics games in development.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ProductsGrid products={products} />
|
||||
|
||||
<div className="flex justify-center mt-16 motion-reduce:hidden">
|
||||
<img
|
||||
src="/images/animations/anim3_matrix_light.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="w-20 h-20 opacity-40 block dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/images/animations/anim3_matrix.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="w-20 h-20 opacity-50 hidden dark:block"
|
||||
/>
|
||||
<object data="/images/animations/anim3_matrix_light.svg" type="image/svg+xml" aria-hidden="true" className="w-20 h-20 opacity-40 block dark:hidden pointer-events-none"></object>
|
||||
<object data="/images/animations/anim3_matrix.svg" type="image/svg+xml" aria-hidden="true" className="w-20 h-20 opacity-50 hidden dark:block pointer-events-none"></object>
|
||||
</div>
|
||||
</div>
|
||||
<MobileNav />
|
||||
|
||||
@@ -33,7 +33,7 @@ export default function ServicesPage() {
|
||||
<div id="main-content" className="z-10 w-full max-w-5xl mx-auto py-20 px-4">
|
||||
{/* Page header */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6 pb-3 bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-blue-500">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6 pb-3 brand-gradient-text">
|
||||
What we build
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import Link from "next/link";
|
||||
import { ChevronDown, LayoutGrid, Smartphone, Wrench, Info } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { SPLASH_LOGO_SRC } from "./splash-logo-data";
|
||||
import { SPLASH_LOGO_SRC_DARK, SPLASH_LOGO_SRC_LIGHT } from "./splash-logo-data";
|
||||
|
||||
const navButtons = [
|
||||
{ label: "Portfolio", href: "/products", Icon: LayoutGrid, corner: "left-4 top-6 sm:left-6 sm:top-24 lg:left-8 lg:top-32" },
|
||||
@@ -179,17 +179,24 @@ export function HeroSplash({ onEnter, sectionRef, leaving }: { onEnter: () => vo
|
||||
{/* Data URI (no network request) so the logo paints with FCP; it is the
|
||||
mobile LCP element. */}
|
||||
<img
|
||||
src={SPLASH_LOGO_SRC}
|
||||
src={SPLASH_LOGO_SRC_LIGHT}
|
||||
alt="Such Software"
|
||||
fetchPriority="high"
|
||||
className="h-auto w-[min(72vw,42vh)]"
|
||||
className="h-auto w-[min(72vw,42vh)] dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src={SPLASH_LOGO_SRC_DARK}
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
fetchPriority="high"
|
||||
className="hidden h-auto w-[min(72vw,42vh)] dark:block"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Cover text hidden on mobile (logo + corner icons carry it there); fades out on enter */}
|
||||
<p
|
||||
className={`mt-10 hidden sm:block bg-gradient-to-r from-cyan-400 to-blue-600 bg-clip-text pb-1 text-3xl font-bold text-transparent sm:text-4xl md:text-5xl transition-opacity duration-700 motion-safe:animate-in motion-safe:fade-in ${entering ? "opacity-0" : "opacity-100"}`}
|
||||
className={`mt-10 hidden sm:block brand-gradient-text pb-1 text-3xl font-bold text-transparent sm:text-4xl md:text-5xl transition-opacity duration-700 motion-safe:animate-in motion-safe:fade-in ${entering ? "opacity-0" : "opacity-100"}`}
|
||||
style={{ animationDuration: "700ms", animationDelay: "120ms", animationFillMode: "backwards" }}
|
||||
>
|
||||
Precision Engineering for Everyone
|
||||
|
||||
@@ -49,16 +49,18 @@ export function HomeShell({ children }: { children: ReactNode }) {
|
||||
if (entered) return;
|
||||
const el = splashRef.current;
|
||||
if (!el) return;
|
||||
// Enter once 40% of the splash has scrolled by: requiring the whole screen to
|
||||
// leave the viewport made the reveal feel like a toll booth.
|
||||
const io = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (!entry.isIntersecting) {
|
||||
if (entry.intersectionRatio < 0.6) {
|
||||
restoreScroll.current = Math.max(0, window.scrollY - el.offsetHeight);
|
||||
sessionStorage.setItem("such:entered", "1");
|
||||
setEntered(true);
|
||||
setSplashUp(false); // scrolled past: just unmount, no overlay fade needed
|
||||
}
|
||||
},
|
||||
{ threshold: 0 },
|
||||
{ threshold: [0, 0.6] },
|
||||
);
|
||||
io.observe(el);
|
||||
return () => io.disconnect();
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
// AUTO-GENERATED from public/images/branding/splash-such.svg.
|
||||
// Inlined as a data URI so the splash logo (the homepage LCP element) needs no
|
||||
// network request and paints with first contentful paint. Regenerate if the
|
||||
// mark changes.
|
||||
export const SPLASH_LOGO_SRC =
|
||||
"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20role%3D%22img%22%20aria-label%3D%22Such%20Software%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22splash-glow%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%221.6%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3CfeMergeNode%20in%3D%22SourceGraphic%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%22172%22%20height%3D%22172%22%20rx%3D%2216%22%20fill%3D%22none%22%20stroke%3D%22%2322d3ee%22%20stroke-width%3D%223.5%22%20filter%3D%22url%28%23splash-glow%29%22%20opacity%3D%220.45%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%2214%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M%2078%2C36%20H%2036%20V%2058%20H%2078%20V%2082%20H%2036%22%20stroke%3D%22%2335c98e%22%2F%3E%3Cpath%20d%3D%22m%20118%2C36%20v%2034%20c%200%2C12.15%209.85%2C14%2022%2C14%2012.15%2C0%2022%2C-1.85%2022%2C-14%20V%2036%22%20stroke%3D%22%23e8689e%22%2F%3E%3Cpath%20d%3D%22M%2078%2C118%20H%2036%20V%20164%20H%2078%22%20stroke%3D%22%234aade0%22%2F%3E%3Cpath%20d%3D%22M%20118%2C118%20V%20164%20M%20162%2C118%20V%20164%20M%20118%2C141%20H%20162%22%20stroke%3D%22%2345c99e%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
|
||||
// AUTO-GENERATED from packs/such-software/pack.json (such-graphics).
|
||||
// Inlined as data URIs so the splash logo (the homepage LCP element) needs no
|
||||
// network request and paints with first contentful paint. Two theme variants:
|
||||
// the pack's dark hues are the light hues lifted for contrast on near-black,
|
||||
// so each ground gets the palette that was tuned for it. Regenerate from the
|
||||
// pack if the mark changes; public/images/branding/splash-such.svg mirrors
|
||||
// the dark variant for anything that hotlinks it.
|
||||
export const SPLASH_LOGO_SRC_DARK =
|
||||
"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20role%3D%22img%22%20aria-label%3D%22Such%20Software%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22splash-glow%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%221.6%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3CfeMergeNode%20in%3D%22SourceGraphic%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%22172%22%20height%3D%22172%22%20rx%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%2345c99e%22%20stroke-width%3D%223.5%22%20filter%3D%22url%28%23splash-glow%29%22%20opacity%3D%220.45%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%2214%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M%2078%2C36%20H%2036%20V%2058%20H%2078%20V%2082%20H%2036%22%20stroke%3D%22%2335925c%22%20transform%3D%22translate%283%2C0%29%22%2F%3E%3Cpath%20d%3D%22m%20118%2C36%20v%2034%20c%200%2C12.15%209.85%2C13%2022%2C13%2012.15%2C0%2022%2C-3.1%2022%2C-13%20V%2036%22%20stroke%3D%22%23e8689e%22%20transform%3D%22translate%28-3%2C0%29%22%2F%3E%3Cpath%20d%3D%22M%2078%2C118%20H%2036%20V%20164%20H%2078%22%20stroke%3D%22%234aade0%22%20transform%3D%22translate%283%2C0%29%22%2F%3E%3Cpath%20d%3D%22M%20118%2C118%20V%20164%20M%20162%2C118%20V%20164%20M%20118%2C141%20H%20162%22%20stroke%3D%22%233ad4c6%22%20transform%3D%22translate%28-3%2C0%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
|
||||
export const SPLASH_LOGO_SRC_LIGHT =
|
||||
"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20role%3D%22img%22%20aria-label%3D%22Such%20Software%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22splash-glow%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%221.6%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3CfeMergeNode%20in%3D%22SourceGraphic%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%22172%22%20height%3D%22172%22%20rx%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%231a5c38%22%20stroke-width%3D%223.5%22%20filter%3D%22url%28%23splash-glow%29%22%20opacity%3D%220.45%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%2214%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M%2078%2C36%20H%2036%20V%2058%20H%2078%20V%2082%20H%2036%22%20stroke%3D%22%231a5c38%22%20transform%3D%22translate%283%2C0%29%22%2F%3E%3Cpath%20d%3D%22m%20118%2C36%20v%2034%20c%200%2C12.15%209.85%2C13%2022%2C13%2012.15%2C0%2022%2C-3.1%2022%2C-13%20V%2036%22%20stroke%3D%22%23b83670%22%20transform%3D%22translate%28-3%2C0%29%22%2F%3E%3Cpath%20d%3D%22M%2078%2C118%20H%2036%20V%20164%20H%2078%22%20stroke%3D%22%23176a92%22%20transform%3D%22translate%283%2C0%29%22%2F%3E%3Cpath%20d%3D%22M%20118%2C118%20V%20164%20M%20162%2C118%20V%20164%20M%20118%2C141%20H%20162%22%20stroke%3D%22%2312857e%22%20transform%3D%22translate%28-3%2C0%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
|
||||
|
||||
@@ -133,16 +133,16 @@ export function ProductsGrid({ products }: { products: Product[] }) {
|
||||
id="product-sort"
|
||||
value={sort}
|
||||
onChange={(e) => setSort(e.target.value as SortKey)}
|
||||
className="rounded-lg border border-border bg-background px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-cyan-400/50"
|
||||
className="rounded-lg border border-border bg-background px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-[#3ad4c6]/50"
|
||||
>
|
||||
<option value="release">Release date (newest)</option>
|
||||
<option value="name">Name (A–Z)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-3 gap-8">
|
||||
{sorted.map((product, i) => (
|
||||
<ScrollReveal key={product.slug} delay={(i % 2) * 0.08}>
|
||||
<ScrollReveal key={product.slug} delay={(i % 3) * 0.08}>
|
||||
<Link href={`/products/${product.slug}`} className="block h-full">
|
||||
<div className="h-full cursor-pointer">
|
||||
<ProductCardInner product={product} />
|
||||
|
||||
@@ -99,7 +99,7 @@ export function articleLd(opts: { title: string; description: string; slug: stri
|
||||
publisher: {
|
||||
"@type": "Organization",
|
||||
name: "Such Software",
|
||||
logo: { "@type": "ImageObject", url: `${SITE}/images/branding/clean_dark_w_text.svg` },
|
||||
logo: { "@type": "ImageObject", url: `${SITE}/images/branding/icon-512.png` },
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user