Changeset 0.9.2 (#52)
This commit is contained in:
@@ -1,10 +1,53 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="12" fill="#1a1a2e"/>
|
||||
<!-- Arrow 1: bottom-left → top-right -->
|
||||
<path d="M12 48 L36 16" stroke="#6c9fff" stroke-width="5.5" stroke-linecap="round" fill="none"/>
|
||||
<polygon points="42,12 34,14 38,22" fill="#6c9fff"/>
|
||||
<!-- Arrow 2: top-left → bottom-right (gap at crossover) -->
|
||||
<path d="M12 16 L24 30" stroke="#a78bfa" stroke-width="5.5" stroke-linecap="round" fill="none"/>
|
||||
<path d="M30 38 L36 48" stroke="#a78bfa" stroke-width="5.5" stroke-linecap="round" fill="none"/>
|
||||
<polygon points="42,52 34,50 38,42" fill="#a78bfa"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
|
||||
<defs>
|
||||
<linearGradient id="panel" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#3d3935"/>
|
||||
<stop offset="100%" stop-color="#252220"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Panel background -->
|
||||
<rect x="4" y="4" width="56" height="56" rx="10" fill="url(#panel)" stroke="#4a4540" stroke-width="1.5"/>
|
||||
|
||||
<!-- Static jack holes (dark rings) -->
|
||||
<circle cx="22" cy="23" r="8" fill="#111"/>
|
||||
<circle cx="42" cy="23" r="8" fill="#111"/>
|
||||
<circle cx="42" cy="43" r="8" fill="#111"/>
|
||||
<circle cx="22" cy="43" r="8" fill="#111"/>
|
||||
|
||||
<!--
|
||||
Cascading color rotation (clockwise: TL → TR → BR → BL)
|
||||
dur=12s, each cascade round=3s, fade=0.4s out + 0.4s in
|
||||
As dot N fades in, dot N+1 begins fading out (overlap)
|
||||
|
||||
Blue=#2D7DD2 Orange=#E8852E Green=#2EAA4E Purple=#9B59B6
|
||||
-->
|
||||
|
||||
<!-- TL: Blue → Purple → Green → Orange (offset 0s) -->
|
||||
<circle cx="22" cy="23" r="5.5" fill="#2D7DD2">
|
||||
<animate attributeName="fill" dur="12s" repeatCount="indefinite"
|
||||
keyTimes="0;0.0333;0.0667;0.25;0.2833;0.3167;0.5;0.5333;0.5667;0.75;0.7833;0.8167;1"
|
||||
values="#2D7DD2;#111;#9B59B6;#9B59B6;#111;#2EAA4E;#2EAA4E;#111;#E8852E;#E8852E;#111;#2D7DD2;#2D7DD2"/>
|
||||
</circle>
|
||||
|
||||
<!-- TR: Orange → Blue → Purple → Green (offset 0.4s) -->
|
||||
<circle cx="42" cy="23" r="5.5" fill="#E8852E">
|
||||
<animate attributeName="fill" dur="12s" repeatCount="indefinite"
|
||||
keyTimes="0;0.0333;0.0667;0.1;0.2833;0.3167;0.35;0.5333;0.5667;0.6;0.7833;0.8167;0.85;1"
|
||||
values="#E8852E;#E8852E;#111;#2D7DD2;#2D7DD2;#111;#9B59B6;#9B59B6;#111;#2EAA4E;#2EAA4E;#111;#E8852E;#E8852E"/>
|
||||
</circle>
|
||||
|
||||
<!-- BR: Purple → Green → Orange → Blue (offset 0.8s) -->
|
||||
<circle cx="42" cy="43" r="5.5" fill="#9B59B6">
|
||||
<animate attributeName="fill" dur="12s" repeatCount="indefinite"
|
||||
keyTimes="0;0.0667;0.1;0.1333;0.3167;0.35;0.3833;0.5667;0.6;0.6333;0.8167;0.85;0.8833;1"
|
||||
values="#9B59B6;#9B59B6;#111;#2EAA4E;#2EAA4E;#111;#E8852E;#E8852E;#111;#2D7DD2;#2D7DD2;#111;#9B59B6;#9B59B6"/>
|
||||
</circle>
|
||||
|
||||
<!-- BL: Green → Orange → Blue → Purple (offset 1.2s) -->
|
||||
<circle cx="22" cy="43" r="5.5" fill="#2EAA4E">
|
||||
<animate attributeName="fill" dur="12s" repeatCount="indefinite"
|
||||
keyTimes="0;0.1;0.1333;0.1667;0.35;0.3833;0.4167;0.6;0.6333;0.6667;0.85;0.8833;0.9167;1"
|
||||
values="#2EAA4E;#2EAA4E;#111;#E8852E;#E8852E;#111;#2D7DD2;#2D7DD2;#111;#9B59B6;#9B59B6;#111;#2EAA4E;#2EAA4E"/>
|
||||
</circle>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 642 B After Width: | Height: | Size: 2.5 KiB |
Reference in New Issue
Block a user