Refine LED status patterns and update SVG animations for clarity and consistency

This commit is contained in:
PhosphorosVR
2025-09-07 13:13:32 +02:00
parent 7b84204457
commit 306d97fa18
4 changed files with 21 additions and 15 deletions

View File

@@ -1,5 +1,7 @@
<svg width="60" height="60" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle id="dot" cx="50" cy="50" r="30" fill="#ff2d55">
<animate attributeName="fill-opacity" values="1;0;1;0;1;0" keyTimes="0;0.1875;0.375;0.5625;0.75;1" dur="1.6s" repeatCount="indefinite"/>
<circle cx="50" cy="50" r="30" fill="#ff2d55">
<!-- Pattern: ON300 OFF300 ON300 OFF700 (1600ms) -->
<animate attributeName="fill-opacity" dur="1.6s" repeatCount="indefinite" calcMode="discrete"
values="1;0;1;0;0" keyTimes="0;0.1875;0.375;0.5625;1" />
</circle>
</svg>

Before

Width:  |  Height:  |  Size: 300 B

After

Width:  |  Height:  |  Size: 371 B

View File

@@ -1,5 +1,7 @@
<svg width="60" height="60" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle id="dot" cx="50" cy="50" r="30" fill="#34c759">
<animate attributeName="fill-opacity" values="1;0;1;0;1;0;0" keyTimes="0;0.166;0.333;0.5;0.666;0.833;1" dur="1.2s" repeatCount="indefinite"/>
<circle cx="50" cy="50" r="30" fill="#34c759">
<!-- Pattern: (ON150 OFF150)x3 then OFF600 (total 1350ms) -->
<animate attributeName="fill-opacity" dur="1.35s" repeatCount="indefinite" calcMode="discrete"
values="1;0;1;0;1;0" keyTimes="0;0.1111;0.2222;0.3333;0.4444;1" />
</circle>
</svg>

Before

Width:  |  Height:  |  Size: 305 B

After

Width:  |  Height:  |  Size: 391 B

View File

@@ -1,5 +1,7 @@
<svg width="60" height="60" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle id="dot" cx="50" cy="50" r="30" fill="#ff9500">
<animate attributeName="fill-opacity" values="1;0;1;0;1;0" keyTimes="0;0.181;0.454;0.545;0.909;1" dur="1.1s" repeatCount="indefinite"/>
<circle cx="50" cy="50" r="30" fill="#ff9500">
<!-- Pattern: ON200 OFF100 ON500 OFF300 (1100ms) -->
<animate attributeName="fill-opacity" dur="1.1s" repeatCount="indefinite" calcMode="discrete"
values="1;0;1;0;0" keyTimes="0;0.1818;0.2727;0.7273;1" />
</circle>
</svg>

Before

Width:  |  Height:  |  Size: 299 B

After

Width:  |  Height:  |  Size: 372 B