feat(design): Wellen in der Seitenleiste von Aura rollen
Die festen Huegel weichen drei Wellenkacheln (aura-wave-back/mid/front). Jede ist genau eine Sinusperiode breit, wiederholt sich waagerecht und wandert in 40 s um ihre eigene Kachelbreite - nahtlos und in beiden Modi. Unterschiedliche Kachelbreiten ergeben unterschiedliche Geschwindigkeiten. Loest aura-hills ab; bei prefers-reduced-motion stehen die Wellen still. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
49c03f5e1b
commit
2d84bac91d
@@ -1,8 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
|
||||
<!--
|
||||
Aura, Seitenleiste: sanfte Huegel in Pastell, von unten hereinwachsend.
|
||||
Eine Datei fuer beide Modi - der Schleier des Mond-Modus toent sie zur
|
||||
Nacht ab (index.css).
|
||||
Aura, Seitenleiste: nur der warme Dunst ueber dem unteren Rand. Die Wellen
|
||||
darueber liegen in eigenen Dateien (aura-wave-*.svg), weil sie sich
|
||||
bewegen und dafuer einzeln verschoben werden muessen.
|
||||
-->
|
||||
<defs>
|
||||
<linearGradient id="dunst" x1="0" y1="0" x2="0" y2="1">
|
||||
@@ -14,7 +14,4 @@
|
||||
</filter>
|
||||
</defs>
|
||||
<rect y="520" width="260" height="380" fill="url(#dunst)" filter="url(#weich)" />
|
||||
<path d="M0 730 C 60 690 120 700 170 720 C 210 736 240 716 260 706 L260 900 L0 900 Z" fill="#c7b8e8" opacity="0.5" />
|
||||
<path d="M0 780 C 50 760 110 772 160 764 C 200 758 236 770 260 762 L260 900 L0 900 Z" fill="#f2b98a" opacity="0.55" />
|
||||
<path d="M0 830 C 70 812 130 826 190 818 C 220 814 244 820 260 816 L260 900 L0 900 Z" fill="#9fcfa8" opacity="0.55" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 796 B |
Reference in New Issue
Block a user