Files
perinco-CRM/public/themes/rainy-header.svg
T
Sascha WolfandClaude Opus 5 77b61b4a04 feat(design): neues Theme Rainy mit Nieselregen und Wetterleuchten
Schieferblau in hell und dunkel. Ein paar Tropfen fallen per Canvas
ueber den Bildschirm und zerspritzen am unteren Rand; die Wolken der
oberen Leiste leuchten alle 7-18 s auf (Maske = Wolken-SVG). Bei
prefers-reduced-motion bleibt es still.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-17 17:35:31 +02:00

47 lines
2.5 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80" width="1600" height="80" preserveAspectRatio="xMidYMid slice">
<!--
Rainy, obere Leiste: eine Wolkendecke.
Die Datei hat zwei Aufgaben. Sie ist das Hintergrundbild der Leiste, und sie
ist die Maske fuer das Wetterleuchten (components/RainyWeather.tsx): der
Blitz leuchtet nur dort, wo hier deckend gezeichnet ist. Deshalb gibt es
keine Flaeche und keinen Himmel, nur Wolken auf durchsichtigem Grund - sonst
leuchtete beim Blitz die ganze Leiste statt der Wolken.
Drei Lagen von hinten nach vorn: hell und weich, mittel, dunkel und
tiefhaengend. Die Unterkanten sind flach wie bei echten Regenwolken.
-->
<defs>
<filter id="weich" x="-10%" y="-40%" width="120%" height="180%">
<feGaussianBlur stdDeviation="2.2" />
</filter>
</defs>
<!-- Hintere Lage: hell, verschwommen -->
<g fill="#a9b6c6" opacity="0.55" filter="url(#weich)">
<ellipse cx="90" cy="22" rx="110" ry="20" />
<ellipse cx="330" cy="16" rx="140" ry="22" />
<ellipse cx="610" cy="24" rx="130" ry="20" />
<ellipse cx="880" cy="14" rx="150" ry="22" />
<ellipse cx="1150" cy="22" rx="130" ry="20" />
<ellipse cx="1410" cy="16" rx="150" ry="22" />
</g>
<!-- Mittlere Lage -->
<g fill="#8394aa" opacity="0.7" filter="url(#weich)">
<path d="M150 44 C 150 30 170 22 186 26 C 194 10 222 6 238 18 C 252 6 282 10 288 28 C 306 26 318 36 314 46 Z" />
<path d="M500 42 C 498 28 520 20 536 26 C 546 8 580 4 596 20 C 612 8 646 14 650 30 C 670 28 684 38 678 46 Z" />
<path d="M760 40 C 760 26 780 18 796 24 C 806 8 836 4 850 18 C 866 8 894 12 898 28 C 914 28 924 36 920 44 Z" />
<path d="M1060 44 C 1058 30 1078 22 1094 28 C 1104 10 1138 6 1154 22 C 1170 10 1204 16 1208 32 C 1226 30 1238 40 1232 48 Z" />
<path d="M1360 42 C 1360 28 1380 20 1396 26 C 1406 10 1438 6 1452 20 C 1468 10 1498 14 1502 30 C 1518 30 1530 38 1524 46 Z" />
</g>
<!-- Vordere Lage: dunkel, tief, flache Unterkante -->
<g fill="#5d6d82" opacity="0.85">
<path d="M300 56 C 296 42 314 32 332 38 C 340 20 374 16 390 32 C 402 20 436 22 440 40 C 460 38 474 48 468 58 Z" />
<path d="M640 60 C 636 46 656 36 674 42 C 684 24 720 20 736 36 C 750 24 786 28 790 46 C 810 44 824 54 818 62 Z" />
<path d="M960 54 C 956 40 976 30 994 36 C 1004 18 1038 14 1054 30 C 1068 18 1102 22 1106 40 C 1124 38 1138 48 1132 56 Z" />
<path d="M1220 60 C 1218 46 1236 38 1252 42 C 1262 26 1292 22 1306 36 C 1320 26 1350 30 1352 46 C 1368 46 1378 54 1374 62 Z" />
</g>
</svg>