V0.7.0 shell contract (#54)
All checks were successful
BIN
icons/apple-touch-icon-b-dark.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
icons/apple-touch-icon-b-light.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
icons/apple-touch-icon-e-dark.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
icons/apple-touch-icon-e-light.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
icons/favicon-16-b-dark.png
Normal file
|
After Width: | Height: | Size: 218 B |
BIN
icons/favicon-16-b-light.png
Normal file
|
After Width: | Height: | Size: 214 B |
BIN
icons/favicon-16-e-dark.png
Normal file
|
After Width: | Height: | Size: 304 B |
BIN
icons/favicon-16-e-light.png
Normal file
|
After Width: | Height: | Size: 312 B |
BIN
icons/favicon-32-b-dark.png
Normal file
|
After Width: | Height: | Size: 363 B |
BIN
icons/favicon-32-b-light.png
Normal file
|
After Width: | Height: | Size: 332 B |
BIN
icons/favicon-32-e-dark.png
Normal file
|
After Width: | Height: | Size: 457 B |
BIN
icons/favicon-32-e-light.png
Normal file
|
After Width: | Height: | Size: 459 B |
20
icons/favicon-animated.svg
Normal file
@@ -0,0 +1,20 @@
|
||||
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
@keyframes p { 0%,100%{r:2.5;opacity:1} 50%{r:3;opacity:0.8} }
|
||||
.c { animation: p 2.4s ease-in-out infinite; }
|
||||
</style>
|
||||
<rect width="32" height="32" rx="6" fill="#14142a"/>
|
||||
<line x1="16" y1="8" x2="26" y2="16" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
|
||||
<line x1="26" y1="16" x2="16" y2="24" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
|
||||
<line x1="16" y1="24" x2="6" y2="16" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
|
||||
<line x1="6" y1="16" x2="16" y2="8" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
|
||||
<line x1="6" y1="16" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
|
||||
<line x1="26" y1="16" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
|
||||
<line x1="16" y1="8" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
|
||||
<line x1="16" y1="16" x2="16" y2="24" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
|
||||
<circle cx="16" cy="8" r="2" fill="#3B82F6"/>
|
||||
<circle cx="6" cy="16" r="2" fill="#3B82F6"/>
|
||||
<circle cx="26" cy="16" r="2" fill="#EF4444"/>
|
||||
<circle cx="16" cy="24" r="2" fill="#3B82F6"/>
|
||||
<circle cx="16" cy="16" r="2.5" fill="#3B82F6" class="c"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
16
icons/favicon.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" rx="6" fill="#14142a"/>
|
||||
<line x1="16" y1="7" x2="26" y2="16" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
|
||||
<line x1="26" y1="16" x2="16" y2="25" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
|
||||
<line x1="16" y1="25" x2="6" y2="16" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
|
||||
<line x1="6" y1="16" x2="16" y2="7" stroke="#c8c8d0" stroke-width="1" opacity="0.3"/>
|
||||
<line x1="6" y1="16" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
|
||||
<line x1="26" y1="16" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
|
||||
<line x1="16" y1="7" x2="16" y2="16" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
|
||||
<line x1="16" y1="16" x2="16" y2="25" stroke="#c8c8d0" stroke-width="0.8" opacity="0.4"/>
|
||||
<circle cx="16" cy="7" r="2" fill="#3B82F6"/>
|
||||
<circle cx="6" cy="16" r="2" fill="#3B82F6"/>
|
||||
<circle cx="26" cy="16" r="2" fill="#EF4444"/>
|
||||
<circle cx="16" cy="25" r="2" fill="#3B82F6"/>
|
||||
<circle cx="16" cy="16" r="2.5" fill="#3B82F6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
icons/icon-128-b-dark.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
icons/icon-128-b-light.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
icons/icon-128-e-dark.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
icons/icon-128-e-light.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
icons/icon-192-b-dark.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
icons/icon-192-b-light.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
icons/icon-192-e-dark.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
icons/icon-192-e-light.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
icons/icon-256-b-dark.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
icons/icon-256-b-light.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
icons/icon-256-e-dark.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
icons/icon-256-e-light.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
icons/icon-48-b-dark.png
Normal file
|
After Width: | Height: | Size: 496 B |
BIN
icons/icon-48-b-light.png
Normal file
|
After Width: | Height: | Size: 492 B |
BIN
icons/icon-48-e-dark.png
Normal file
|
After Width: | Height: | Size: 564 B |
BIN
icons/icon-48-e-light.png
Normal file
|
After Width: | Height: | Size: 559 B |
BIN
icons/icon-512-b-dark.png
Normal file
|
After Width: | Height: | Size: 5.4 KiB |
BIN
icons/icon-512-b-light.png
Normal file
|
After Width: | Height: | Size: 5.4 KiB |
BIN
icons/icon-512-e-dark.png
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
icons/icon-512-e-light.png
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
icons/icon-64-b-dark.png
Normal file
|
After Width: | Height: | Size: 626 B |
BIN
icons/icon-64-b-light.png
Normal file
|
After Width: | Height: | Size: 620 B |
BIN
icons/icon-64-e-dark.png
Normal file
|
After Width: | Height: | Size: 711 B |
BIN
icons/icon-64-e-light.png
Normal file
|
After Width: | Height: | Size: 707 B |
48
icons/icon-b-dark-animated.svg
Normal file
@@ -0,0 +1,48 @@
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
@keyframes center-pulse {
|
||||
0%, 100% { r: 10; opacity: 1; }
|
||||
50% { r: 12; opacity: 0.85; }
|
||||
}
|
||||
@keyframes glow-pulse {
|
||||
0%, 100% { r: 16; opacity: 0.12; }
|
||||
50% { r: 22; opacity: 0.06; }
|
||||
}
|
||||
@keyframes node-breathe {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
.center-node { animation: center-pulse 2.4s ease-in-out infinite; }
|
||||
.center-glow { animation: glow-pulse 2.4s ease-in-out infinite; }
|
||||
.node-tl { animation: node-breathe 2.4s ease-in-out infinite 0.3s; }
|
||||
.node-tr { animation: node-breathe 2.4s ease-in-out infinite 0.6s; }
|
||||
.node-bl { animation: node-breathe 2.4s ease-in-out infinite 0.9s; }
|
||||
.node-br { animation: node-breathe 2.4s ease-in-out infinite 1.2s; }
|
||||
</style>
|
||||
|
||||
<rect width="200" height="200" rx="32" fill="#14142a"/>
|
||||
|
||||
<!-- Diamond outline -->
|
||||
<line x1="100" y1="51" x2="145" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
||||
<line x1="145" y1="100" x2="100" y2="149" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
||||
<line x1="100" y1="149" x2="55" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
||||
<line x1="55" y1="100" x2="100" y2="51" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
||||
|
||||
<!-- Cross lines -->
|
||||
<line x1="55" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="145" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="100" y1="51" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="100" y1="100" x2="100" y2="149" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
||||
|
||||
<!-- Center glow -->
|
||||
<circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.12" class="center-glow"/>
|
||||
|
||||
<!-- Nodes -->
|
||||
<circle cx="100" cy="51" r="8" fill="#3B82F6" class="node-tl"/>
|
||||
<circle cx="55" cy="100" r="8" fill="#3B82F6" class="node-tr"/>
|
||||
<circle cx="145" cy="100" r="8" fill="#EF4444" class="node-bl"/>
|
||||
<circle cx="100" cy="149" r="8" fill="#3B82F6" class="node-br"/>
|
||||
|
||||
<!-- Center -->
|
||||
<circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
21
icons/icon-b-dark.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="200" height="200" rx="32" fill="#14142a"/>
|
||||
<!-- Diamond outline -->
|
||||
<line x1="100" y1="55" x2="142" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
||||
<line x1="142" y1="100" x2="100" y2="145" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
||||
<line x1="100" y1="145" x2="58" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
||||
<line x1="58" y1="100" x2="100" y2="55" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
||||
<!-- Cross lines -->
|
||||
<line x1="58" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="142" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="100" y1="55" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="100" y1="100" x2="100" y2="145" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Center glow -->
|
||||
<circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.12"/>
|
||||
<!-- Nodes -->
|
||||
<circle cx="100" cy="55" r="8" fill="#3B82F6"/>
|
||||
<circle cx="58" cy="100" r="8" fill="#3B82F6"/>
|
||||
<circle cx="142" cy="100" r="8" fill="#EF4444"/>
|
||||
<circle cx="100" cy="145" r="8" fill="#3B82F6"/>
|
||||
<circle cx="100" cy="100" r="10" fill="#3B82F6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
43
icons/icon-b-light-animated.svg
Normal file
@@ -0,0 +1,43 @@
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
@keyframes center-pulse {
|
||||
0%, 100% { r: 10; opacity: 1; }
|
||||
50% { r: 12; opacity: 0.85; }
|
||||
}
|
||||
@keyframes glow-pulse {
|
||||
0%, 100% { r: 16; opacity: 0.1; }
|
||||
50% { r: 22; opacity: 0.05; }
|
||||
}
|
||||
@keyframes node-breathe {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
.center-node { animation: center-pulse 2.4s ease-in-out infinite; }
|
||||
.center-glow { animation: glow-pulse 2.4s ease-in-out infinite; }
|
||||
.node-tl { animation: node-breathe 2.4s ease-in-out infinite 0.3s; }
|
||||
.node-tr { animation: node-breathe 2.4s ease-in-out infinite 0.6s; }
|
||||
.node-bl { animation: node-breathe 2.4s ease-in-out infinite 0.9s; }
|
||||
.node-br { animation: node-breathe 2.4s ease-in-out infinite 1.2s; }
|
||||
</style>
|
||||
|
||||
<rect width="200" height="200" rx="32" fill="#e8e8ee"/>
|
||||
|
||||
<line x1="100" y1="51" x2="145" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
<line x1="145" y1="100" x2="100" y2="149" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
<line x1="100" y1="149" x2="55" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
<line x1="55" y1="100" x2="100" y2="51" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
|
||||
<line x1="55" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="145" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="100" y1="51" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="100" y1="100" x2="100" y2="149" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
|
||||
<circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.1" class="center-glow"/>
|
||||
|
||||
<circle cx="100" cy="51" r="8" fill="#3B82F6" class="node-tl"/>
|
||||
<circle cx="55" cy="100" r="8" fill="#3B82F6" class="node-tr"/>
|
||||
<circle cx="145" cy="100" r="8" fill="#EF4444" class="node-bl"/>
|
||||
<circle cx="100" cy="149" r="8" fill="#3B82F6" class="node-br"/>
|
||||
|
||||
<circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
17
icons/icon-b-light.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="200" height="200" rx="32" fill="#e8e8ee"/>
|
||||
<line x1="100" y1="55" x2="142" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
<line x1="142" y1="100" x2="100" y2="145" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
<line x1="100" y1="145" x2="58" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
<line x1="58" y1="100" x2="100" y2="55" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
|
||||
<line x1="58" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="142" y1="100" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="100" y1="55" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="100" y1="100" x2="100" y2="145" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.1"/>
|
||||
<circle cx="100" cy="55" r="8" fill="#3B82F6"/>
|
||||
<circle cx="58" cy="100" r="8" fill="#3B82F6"/>
|
||||
<circle cx="142" cy="100" r="8" fill="#EF4444"/>
|
||||
<circle cx="100" cy="145" r="8" fill="#3B82F6"/>
|
||||
<circle cx="100" cy="100" r="10" fill="#3B82F6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
67
icons/icon-e-dark-animated.svg
Normal file
@@ -0,0 +1,67 @@
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
@keyframes draw-edge {
|
||||
from { stroke-dashoffset: 120; }
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
@keyframes pop-node {
|
||||
0% { r: 0; opacity: 0; }
|
||||
70% { r: 8; }
|
||||
100% { r: 6; opacity: 1; }
|
||||
}
|
||||
@keyframes pop-center {
|
||||
0% { r: 0; opacity: 0; }
|
||||
70% { r: 10; }
|
||||
100% { r: 8; opacity: 0.7; }
|
||||
}
|
||||
@keyframes center-idle {
|
||||
0%, 100% { r: 8; opacity: 0.7; }
|
||||
50% { r: 9.5; opacity: 0.6; }
|
||||
}
|
||||
|
||||
.edge { stroke-dasharray: 120; stroke-dashoffset: 120; }
|
||||
.e-back-1 { animation: draw-edge 0.5s ease-out 0.0s forwards; }
|
||||
.e-back-2 { animation: draw-edge 0.5s ease-out 0.1s forwards; }
|
||||
.e-back-3 { animation: draw-edge 0.5s ease-out 0.2s forwards; }
|
||||
.e-mid-1 { animation: draw-edge 0.5s ease-out 0.35s forwards; }
|
||||
.e-mid-2 { animation: draw-edge 0.5s ease-out 0.45s forwards; }
|
||||
.e-mid-3 { animation: draw-edge 0.5s ease-out 0.55s forwards; }
|
||||
.e-frt-1 { animation: draw-edge 0.5s ease-out 0.7s forwards; }
|
||||
.e-frt-2 { animation: draw-edge 0.5s ease-out 0.8s forwards; }
|
||||
.e-frt-3 { animation: draw-edge 0.5s ease-out 0.9s forwards; }
|
||||
|
||||
.v-topback { animation: pop-node 0.3s ease-out 0.05s forwards; r: 0; opacity: 0; }
|
||||
.v-backleft { animation: pop-node 0.3s ease-out 0.15s forwards; r: 0; opacity: 0; }
|
||||
.v-backright { animation: pop-node 0.3s ease-out 0.25s forwards; r: 0; opacity: 0; }
|
||||
.v-center { animation: pop-center 0.3s ease-out 0.5s forwards, center-idle 2.4s ease-in-out 1s infinite; r: 0; opacity: 0; }
|
||||
.v-frontleft { animation: pop-node 0.3s ease-out 0.75s forwards; r: 0; opacity: 0; }
|
||||
.v-frontright { animation: pop-node 0.3s ease-out 0.85s forwards; r: 0; opacity: 0; }
|
||||
.v-bottom { animation: pop-node 0.3s ease-out 0.95s forwards; r: 0; opacity: 0; }
|
||||
</style>
|
||||
|
||||
<rect width="200" height="200" rx="32" fill="#14142a"/>
|
||||
|
||||
<!-- Back edges -->
|
||||
<line x1="100" y1="42" x2="46" y2="72" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2" class="edge e-back-1"/>
|
||||
<line x1="100" y1="42" x2="154" y2="72" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2" class="edge e-back-2"/>
|
||||
<line x1="154" y1="72" x2="154" y2="128" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2" class="edge e-back-3"/>
|
||||
|
||||
<!-- Mid edges -->
|
||||
<line x1="46" y1="72" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4" class="edge e-mid-1"/>
|
||||
<line x1="154" y1="72" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4" class="edge e-mid-2"/>
|
||||
<line x1="100" y1="100" x2="100" y2="158" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4" class="edge e-mid-3"/>
|
||||
|
||||
<!-- Front edges -->
|
||||
<line x1="46" y1="72" x2="46" y2="128" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9" class="edge e-frt-1"/>
|
||||
<line x1="46" y1="128" x2="100" y2="158" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9" class="edge e-frt-2"/>
|
||||
<line x1="154" y1="128" x2="100" y2="158" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9" class="edge e-frt-3"/>
|
||||
|
||||
<!-- Vertices -->
|
||||
<circle cx="100" cy="42" fill="#3B82F6" opacity="0.55" class="v-topback"/>
|
||||
<circle cx="46" cy="72" fill="#3B82F6" opacity="0.55" class="v-backleft"/>
|
||||
<circle cx="154" cy="72" fill="#EF4444" opacity="0.55" class="v-backright"/>
|
||||
<circle cx="100" cy="100" fill="#3B82F6" class="v-center"/>
|
||||
<circle cx="46" cy="128" fill="#EF4444" class="v-frontleft"/>
|
||||
<circle cx="154" cy="128" fill="#3B82F6" class="v-frontright"/>
|
||||
<circle cx="100" cy="158" fill="#3B82F6" class="v-bottom"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
23
icons/icon-e-dark.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="200" height="200" rx="32" fill="#14142a"/>
|
||||
<!-- Back edges -->
|
||||
<line x1="100" y1="48" x2="150" y2="74" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2"/>
|
||||
<line x1="100" y1="48" x2="50" y2="74" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2"/>
|
||||
<line x1="150" y1="74" x2="150" y2="126" stroke="#c8c8d0" stroke-width="1.5" stroke-linecap="round" opacity="0.2"/>
|
||||
<!-- Mid edges -->
|
||||
<line x1="50" y1="74" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="150" y1="74" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
||||
<line x1="100" y1="100" x2="100" y2="152" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
||||
<!-- Front edges -->
|
||||
<line x1="50" y1="74" x2="50" y2="126" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9"/>
|
||||
<line x1="50" y1="126" x2="100" y2="152" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9"/>
|
||||
<line x1="150" y1="126" x2="100" y2="152" stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.9"/>
|
||||
<!-- Vertices -->
|
||||
<circle cx="100" cy="48" r="6" fill="#3B82F6" opacity="0.55"/>
|
||||
<circle cx="50" cy="74" r="6" fill="#3B82F6" opacity="0.55"/>
|
||||
<circle cx="150" cy="74" r="6" fill="#EF4444" opacity="0.55"/>
|
||||
<circle cx="100" cy="100" r="8" fill="#3B82F6" opacity="0.7"/>
|
||||
<circle cx="50" cy="126" r="6" fill="#EF4444"/>
|
||||
<circle cx="150" cy="126" r="6" fill="#3B82F6"/>
|
||||
<circle cx="100" cy="152" r="6" fill="#3B82F6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
63
icons/icon-e-light-animated.svg
Normal file
@@ -0,0 +1,63 @@
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
@keyframes draw-edge {
|
||||
from { stroke-dashoffset: 120; }
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
@keyframes pop-node {
|
||||
0% { r: 0; opacity: 0; }
|
||||
70% { r: 8; }
|
||||
100% { r: 6; opacity: 1; }
|
||||
}
|
||||
@keyframes pop-center {
|
||||
0% { r: 0; opacity: 0; }
|
||||
70% { r: 10; }
|
||||
100% { r: 8; opacity: 0.7; }
|
||||
}
|
||||
@keyframes center-idle {
|
||||
0%, 100% { r: 8; opacity: 0.7; }
|
||||
50% { r: 9.5; opacity: 0.6; }
|
||||
}
|
||||
|
||||
.edge { stroke-dasharray: 120; stroke-dashoffset: 120; }
|
||||
.e-back-1 { animation: draw-edge 0.5s ease-out 0.0s forwards; }
|
||||
.e-back-2 { animation: draw-edge 0.5s ease-out 0.1s forwards; }
|
||||
.e-back-3 { animation: draw-edge 0.5s ease-out 0.2s forwards; }
|
||||
.e-mid-1 { animation: draw-edge 0.5s ease-out 0.35s forwards; }
|
||||
.e-mid-2 { animation: draw-edge 0.5s ease-out 0.45s forwards; }
|
||||
.e-mid-3 { animation: draw-edge 0.5s ease-out 0.55s forwards; }
|
||||
.e-frt-1 { animation: draw-edge 0.5s ease-out 0.7s forwards; }
|
||||
.e-frt-2 { animation: draw-edge 0.5s ease-out 0.8s forwards; }
|
||||
.e-frt-3 { animation: draw-edge 0.5s ease-out 0.9s forwards; }
|
||||
|
||||
.v-topback { animation: pop-node 0.3s ease-out 0.05s forwards; r: 0; opacity: 0; }
|
||||
.v-backleft { animation: pop-node 0.3s ease-out 0.15s forwards; r: 0; opacity: 0; }
|
||||
.v-backright { animation: pop-node 0.3s ease-out 0.25s forwards; r: 0; opacity: 0; }
|
||||
.v-center { animation: pop-center 0.3s ease-out 0.5s forwards, center-idle 2.4s ease-in-out 1s infinite; r: 0; opacity: 0; }
|
||||
.v-frontleft { animation: pop-node 0.3s ease-out 0.75s forwards; r: 0; opacity: 0; }
|
||||
.v-frontright { animation: pop-node 0.3s ease-out 0.85s forwards; r: 0; opacity: 0; }
|
||||
.v-bottom { animation: pop-node 0.3s ease-out 0.95s forwards; r: 0; opacity: 0; }
|
||||
</style>
|
||||
|
||||
<rect width="200" height="200" rx="32" fill="#e8e8ee"/>
|
||||
|
||||
<line x1="100" y1="42" x2="46" y2="72" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15" class="edge e-back-1"/>
|
||||
<line x1="100" y1="42" x2="154" y2="72" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15" class="edge e-back-2"/>
|
||||
<line x1="154" y1="72" x2="154" y2="128" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15" class="edge e-back-3"/>
|
||||
|
||||
<line x1="46" y1="72" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3" class="edge e-mid-1"/>
|
||||
<line x1="154" y1="72" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3" class="edge e-mid-2"/>
|
||||
<line x1="100" y1="100" x2="100" y2="158" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3" class="edge e-mid-3"/>
|
||||
|
||||
<line x1="46" y1="72" x2="46" y2="128" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7" class="edge e-frt-1"/>
|
||||
<line x1="46" y1="128" x2="100" y2="158" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7" class="edge e-frt-2"/>
|
||||
<line x1="154" y1="128" x2="100" y2="158" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7" class="edge e-frt-3"/>
|
||||
|
||||
<circle cx="100" cy="42" fill="#3B82F6" opacity="0.55" class="v-topback"/>
|
||||
<circle cx="46" cy="72" fill="#3B82F6" opacity="0.55" class="v-backleft"/>
|
||||
<circle cx="154" cy="72" fill="#EF4444" opacity="0.55" class="v-backright"/>
|
||||
<circle cx="100" cy="100" fill="#3B82F6" class="v-center"/>
|
||||
<circle cx="46" cy="128" fill="#EF4444" class="v-frontleft"/>
|
||||
<circle cx="154" cy="128" fill="#3B82F6" class="v-frontright"/>
|
||||
<circle cx="100" cy="158" fill="#3B82F6" class="v-bottom"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
19
icons/icon-e-light.svg
Normal file
@@ -0,0 +1,19 @@
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="200" height="200" rx="32" fill="#e8e8ee"/>
|
||||
<line x1="100" y1="48" x2="150" y2="74" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15"/>
|
||||
<line x1="100" y1="48" x2="50" y2="74" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15"/>
|
||||
<line x1="150" y1="74" x2="150" y2="126" stroke="#333" stroke-width="1.5" stroke-linecap="round" opacity="0.15"/>
|
||||
<line x1="50" y1="74" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="150" y1="74" x2="100" y2="100" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="100" y1="100" x2="100" y2="152" stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<line x1="50" y1="74" x2="50" y2="126" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="50" y1="126" x2="100" y2="152" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="150" y1="126" x2="100" y2="152" stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
|
||||
<circle cx="100" cy="48" r="6" fill="#3B82F6" opacity="0.55"/>
|
||||
<circle cx="50" cy="74" r="6" fill="#3B82F6" opacity="0.55"/>
|
||||
<circle cx="150" cy="74" r="6" fill="#EF4444" opacity="0.55"/>
|
||||
<circle cx="100" cy="100" r="8" fill="#3B82F6" opacity="0.7"/>
|
||||
<circle cx="50" cy="126" r="6" fill="#EF4444"/>
|
||||
<circle cx="150" cy="126" r="6" fill="#3B82F6"/>
|
||||
<circle cx="100" cy="152" r="6" fill="#3B82F6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
174
icons/icon-morph-dark-animated.svg
Normal file
@@ -0,0 +1,174 @@
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
@keyframes center-pulse {
|
||||
0%, 100% { r: 8; }
|
||||
50% { r: 9.5; }
|
||||
}
|
||||
.center-node { animation: center-pulse 2.4s ease-in-out infinite; }
|
||||
</style>
|
||||
|
||||
<rect width="200" height="200" rx="32" fill="#14142a"/>
|
||||
|
||||
<!--
|
||||
B-state (flat diamond) positions:
|
||||
top: 100,51 left: 55,100 right: 145,100 bottom: 100,149 center: 100,100
|
||||
|
||||
E-state (wireframe cube) positions:
|
||||
topBack: 100,42 backLeft: 46,72 backRight: 154,72
|
||||
center: 100,100 frontLeft: 46,128 frontRight: 154,128 bottom: 100,158
|
||||
|
||||
Mapping B→E:
|
||||
top → topBack (100,51 → 100,42)
|
||||
left → backLeft (55,100 → 46,72) AND spawns frontLeft (55,100 → 46,128)
|
||||
right → backRight (145,100 → 154,72) AND spawns frontRight (145,100 → 154,128)
|
||||
bottom → bottom (100,149 → 100,158)
|
||||
center → center (100,100 → 100,100) stays
|
||||
|
||||
Timing: 1.5s hold B, 1s morph to E, 2s hold E, 1s morph back, repeat
|
||||
-->
|
||||
|
||||
<!-- ═══ EDGES ═══ -->
|
||||
<!-- Diamond outline (B) that morphs to cube edges (E) -->
|
||||
|
||||
<!-- top→right becomes topBack→backRight -->
|
||||
<line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"
|
||||
x1="100" y1="51" x2="145" y2="100">
|
||||
<animate attributeName="x1" values="100;100;100;100;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="51;51;42;42;51" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x2" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y2" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- right→bottom becomes backRight→frontRight -->
|
||||
<line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"
|
||||
x1="145" y1="100" x2="100" y2="149">
|
||||
<animate attributeName="x1" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x2" values="100;100;154;154;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y2" values="149;149;128;128;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- bottom→left becomes frontRight→bottom (front bottom-right) -->
|
||||
<line stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round" opacity="0.25"
|
||||
x1="100" y1="149" x2="55" y2="100">
|
||||
<animate attributeName="x1" values="100;100;154;154;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="149;149;128;128;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x2" values="55;55;100;100;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y2" values="100;100;158;158;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.25;0.25;0.9;0.9;0.25" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- left→top becomes backLeft→topBack -->
|
||||
<line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"
|
||||
x1="55" y1="100" x2="100" y2="51">
|
||||
<animate attributeName="x1" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x2" values="100;100;100;100;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y2" values="51;51;42;42;51" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- Cross: left→center becomes backLeft→center -->
|
||||
<line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"
|
||||
x1="55" y1="100" x2="100" y2="100">
|
||||
<animate attributeName="x1" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- Cross: right→center becomes backRight→center -->
|
||||
<line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"
|
||||
x1="145" y1="100" x2="100" y2="100">
|
||||
<animate attributeName="x1" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- Cross: center→bottom stays vertical but bottom moves -->
|
||||
<line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"
|
||||
x1="100" y1="100" x2="100" y2="149">
|
||||
<animate attributeName="y2" values="149;149;158;158;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- Cross: top→center vertical -->
|
||||
<line stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"
|
||||
x1="100" y1="51" x2="100" y2="100">
|
||||
<animate attributeName="y1" values="51;51;42;42;51" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- NEW edges that appear in E-state (start invisible) -->
|
||||
<!-- frontLeft→bottom -->
|
||||
<line stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round"
|
||||
x1="55" y1="100" x2="100" y2="149" opacity="0">
|
||||
<animate attributeName="x1" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="100;100;128;128;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y2" values="149;149;158;158;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0;0.9;0.9;0" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- backLeft→frontLeft (left vertical) -->
|
||||
<line stroke="#c8c8d0" stroke-width="2.5" stroke-linecap="round"
|
||||
x1="55" y1="100" x2="55" y2="100" opacity="0">
|
||||
<animate attributeName="x1" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x2" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y2" values="100;100;128;128;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0;0.9;0.9;0" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- ═══ NODES ═══ -->
|
||||
|
||||
<!-- Top → TopBack -->
|
||||
<circle cx="100" cy="51" r="8" fill="#3B82F6">
|
||||
<animate attributeName="cy" values="51;51;42;42;51" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;1;0.55;0.55;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="8;8;6;6;8" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Left → BackLeft -->
|
||||
<circle cx="55" cy="100" r="8" fill="#3B82F6">
|
||||
<animate attributeName="cx" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="cy" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;1;0.55;0.55;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="8;8;6;6;8" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Right → BackRight -->
|
||||
<circle cx="145" cy="100" r="8" fill="#EF4444">
|
||||
<animate attributeName="cx" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="cy" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;1;0.55;0.55;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="8;8;6;6;8" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Bottom → Bottom (slight shift) -->
|
||||
<circle cx="100" cy="149" r="8" fill="#3B82F6">
|
||||
<animate attributeName="cy" values="149;149;158;158;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="8;8;6;6;8" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- FrontLeft: spawns from Left position, invisible in B -->
|
||||
<circle cx="55" cy="100" r="0" fill="#EF4444" opacity="0">
|
||||
<animate attributeName="cx" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="cy" values="100;100;128;128;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="0;0;6;6;0" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- FrontRight: spawns from Right position, invisible in B -->
|
||||
<circle cx="145" cy="100" r="0" fill="#3B82F6" opacity="0">
|
||||
<animate attributeName="cx" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="cy" values="100;100;128;128;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="0;0;6;6;0" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Center (always visible, pulse) -->
|
||||
<circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node">
|
||||
<animate attributeName="r" values="10;10;8;8;10" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;1;0.7;0.7;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Center glow -->
|
||||
<circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.12">
|
||||
<animate attributeName="r" values="16;16;12;12;16" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.12;0.12;0.06;0.06;0.12" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
127
icons/icon-morph-light-animated.svg
Normal file
@@ -0,0 +1,127 @@
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
@keyframes center-pulse {
|
||||
0%, 100% { r: 8; }
|
||||
50% { r: 9.5; }
|
||||
}
|
||||
.center-node { animation: center-pulse 2.4s ease-in-out infinite; }
|
||||
</style>
|
||||
|
||||
<rect width="200" height="200" rx="32" fill="#e8e8ee"/>
|
||||
|
||||
<!-- Diamond/cube edges -->
|
||||
<line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"
|
||||
x1="100" y1="51" x2="145" y2="100">
|
||||
<animate attributeName="y1" values="51;51;42;42;51" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x2" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y2" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"
|
||||
x1="145" y1="100" x2="100" y2="149">
|
||||
<animate attributeName="x1" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x2" values="100;100;154;154;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y2" values="149;149;128;128;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<line stroke="#333" stroke-width="2.5" stroke-linecap="round" opacity="0.18"
|
||||
x1="100" y1="149" x2="55" y2="100">
|
||||
<animate attributeName="x1" values="100;100;154;154;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="149;149;128;128;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x2" values="55;55;100;100;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y2" values="100;100;158;158;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.18;0.18;0.7;0.7;0.18" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.18"
|
||||
x1="55" y1="100" x2="100" y2="51">
|
||||
<animate attributeName="x1" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y2" values="51;51;42;42;51" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- Cross lines -->
|
||||
<line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"
|
||||
x1="55" y1="100" x2="100" y2="100">
|
||||
<animate attributeName="x1" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"
|
||||
x1="145" y1="100" x2="100" y2="100">
|
||||
<animate attributeName="x1" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"
|
||||
x1="100" y1="100" x2="100" y2="149">
|
||||
<animate attributeName="y2" values="149;149;158;158;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line stroke="#333" stroke-width="2" stroke-linecap="round" opacity="0.3"
|
||||
x1="100" y1="51" x2="100" y2="100">
|
||||
<animate attributeName="y1" values="51;51;42;42;51" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- E-only edges (spawn) -->
|
||||
<line stroke="#333" stroke-width="2.5" stroke-linecap="round"
|
||||
x1="55" y1="100" x2="100" y2="149" opacity="0">
|
||||
<animate attributeName="x1" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="100;100;128;128;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y2" values="149;149;158;158;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0;0.7;0.7;0" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line stroke="#333" stroke-width="2.5" stroke-linecap="round"
|
||||
x1="55" y1="100" x2="55" y2="100" opacity="0">
|
||||
<animate attributeName="x1" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y1" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x2" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y2" values="100;100;128;128;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0;0.7;0.7;0" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- Nodes -->
|
||||
<circle cx="100" cy="51" r="8" fill="#3B82F6">
|
||||
<animate attributeName="cy" values="51;51;42;42;51" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;1;0.55;0.55;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="8;8;6;6;8" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="55" cy="100" r="8" fill="#3B82F6">
|
||||
<animate attributeName="cx" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="cy" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;1;0.55;0.55;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="8;8;6;6;8" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="145" cy="100" r="8" fill="#EF4444">
|
||||
<animate attributeName="cx" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="cy" values="100;100;72;72;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;1;0.55;0.55;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="8;8;6;6;8" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="100" cy="149" r="8" fill="#3B82F6">
|
||||
<animate attributeName="cy" values="149;149;158;158;149" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="8;8;6;6;8" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Spawn nodes -->
|
||||
<circle cx="55" cy="100" r="0" fill="#EF4444" opacity="0">
|
||||
<animate attributeName="cx" values="55;55;46;46;55" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="cy" values="100;100;128;128;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="0;0;6;6;0" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="145" cy="100" r="0" fill="#3B82F6" opacity="0">
|
||||
<animate attributeName="cx" values="145;145;154;154;145" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="cy" values="100;100;128;128;100" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="0;0;6;6;0" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Center -->
|
||||
<circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node">
|
||||
<animate attributeName="r" values="10;10;8;8;10" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;1;0.7;0.7;1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.1">
|
||||
<animate attributeName="r" values="16;16;12;12;16" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.1;0.1;0.05;0.05;0.1" keyTimes="0;0.27;0.45;0.73;1" dur="5.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.3 KiB |
BIN
icons/preview-sheet.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
12
icons/wordmark-dark.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg viewBox="0 0 520 80" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- A-frame lettermark -->
|
||||
<line x1="28" y1="8" x2="6" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
|
||||
<line x1="28" y1="8" x2="50" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
|
||||
<line x1="14" y1="46" x2="42" y2="46" stroke="#3B82F6" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<circle cx="28" cy="8" r="4" fill="#3B82F6"/>
|
||||
<circle cx="14" cy="46" r="2.5" fill="#EF4444"/>
|
||||
<circle cx="28" cy="46" r="2.5" fill="#3B82F6"/>
|
||||
<circle cx="42" cy="46" r="2.5" fill="#EF4444"/>
|
||||
<!-- "rmature" text -->
|
||||
<text x="58" y="62" fill="#dddddd" font-family="-apple-system, system-ui, 'Segoe UI', sans-serif" font-size="52" font-weight="300" letter-spacing="1">rmature</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 793 B |
10
icons/wordmark-light.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg viewBox="0 0 520 80" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="28" y1="8" x2="6" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
|
||||
<line x1="28" y1="8" x2="50" y2="68" stroke="#3B82F6" stroke-width="3.5" stroke-linecap="round"/>
|
||||
<line x1="14" y1="46" x2="42" y2="46" stroke="#3B82F6" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<circle cx="28" cy="8" r="4" fill="#3B82F6"/>
|
||||
<circle cx="14" cy="46" r="2.5" fill="#EF4444"/>
|
||||
<circle cx="28" cy="46" r="2.5" fill="#3B82F6"/>
|
||||
<circle cx="42" cy="46" r="2.5" fill="#EF4444"/>
|
||||
<text x="58" y="62" fill="#222222" font-family="-apple-system, system-ui, 'Segoe UI', sans-serif" font-size="52" font-weight="300" letter-spacing="1">rmature</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 737 B |