gurix/Zauberwald
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(02-02): add 7 SVG fallback images for forest elements

Browse Source 
- blume, pilz, vogel, schmetterling, reh, baum, bach
- Pastel watercolor style with soft gradients, 200x200 viewBox
- All under 2KB, no text elements, child-friendly aesthetic

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
gurix
2026-03-29 11:54:56 +02:00
co-authored by Claude Opus 4.6
parent b31b9fd26c
commit 66f8403b33
7 changed files with 162 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/fallback-images/bach.svg
+24
View File
@@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7DB8D4" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#7DB8D4" stop-opacity="0.4"/>
</linearGradient>
<radialGradient id="stone" cx="50%" cy="40%" r="55%">
<stop offset="0%" stop-color="#C8BEB4" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#A89888" stop-opacity="0.7"/>
</radialGradient>
</defs>
<path d="M0,100 C30,95 50,110 80,105 C110,100 130,115 160,108 C180,103 195,110 200,108 L200,145 C180,148 160,140 130,145 C110,148 80,138 50,142 C30,145 10,138 0,140 Z" fill="url(#water)"/>
<path d="M20,108 C40,105 55,112 75,108" fill="none" stroke="#FFF8F0" stroke-width="1.5" opacity="0.5" stroke-linecap="round"/>
<path d="M100,112 C120,108 140,115 165,110" fill="none" stroke="#FFF8F0" stroke-width="1.5" opacity="0.4" stroke-linecap="round"/>
<ellipse cx="50" cy="95" rx="14" ry="10" fill="url(#stone)"/>
<ellipse cx="120" cy="98" rx="11" ry="8" fill="url(#stone)"/>
<ellipse cx="170" cy="100" rx="9" ry="7" fill="url(#stone)"/>
<ellipse cx="85" cy="148" rx="10" ry="7" fill="url(#stone)" opacity="0.6"/>
<ellipse cx="30" cy="85" rx="8" ry="4" fill="#6DB87D" opacity="0.5"/>
<ellipse cx="90" cy="82" rx="6" ry="3" fill="#6DB87D" opacity="0.4"/>
<ellipse cx="150" cy="88" rx="7" ry="4" fill="#6DB87D" opacity="0.45"/>
<ellipse cx="60" cy="155" rx="10" ry="5" fill="#6DB87D" opacity="0.4"/>
<ellipse cx="140" cy="152" rx="8" ry="4" fill="#6DB87D" opacity="0.35"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/assets/fallback-images/baum.svg
+23
View File
@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<radialGradient id="crown" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#6DB87D" stop-opacity="0.9"/>
<stop offset="70%" stop-color="#6DB87D" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#E8F5E4" stop-opacity="0.4"/>
</radialGradient>
<linearGradient id="trunk" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#B8865A" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#8B6B47" stop-opacity="0.8"/>
</linearGradient>
</defs>
<rect x="90" y="110" width="20" height="60" rx="4" fill="url(#trunk)"/>
<circle cx="100" cy="72" r="48" fill="url(#crown)"/>
<circle cx="75" cy="82" r="25" fill="#6DB87D" opacity="0.5"/>
<circle cx="125" cy="82" r="25" fill="#6DB87D" opacity="0.5"/>
<circle cx="100" cy="55" r="20" fill="#E8F5E4" opacity="0.4"/>
<circle cx="85" cy="65" r="5" fill="#E88BAE" opacity="0.5"/>
<circle cx="115" cy="70" r="4" fill="#E88BAE" opacity="0.4"/>
<circle cx="100" cy="50" r="3" fill="#E88BAE" opacity="0.45"/>
<circle cx="108" cy="85" r="3.5" fill="#E8B84B" opacity="0.5"/>
<ellipse cx="100" cy="175" rx="35" ry="6" fill="#6DB87D" opacity="0.3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/assets/fallback-images/blume.svg
+21
View File
@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<radialGradient id="petal" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#E88BAE" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#9B7DC4" stop-opacity="0.6"/>
</radialGradient>
<radialGradient id="center" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#E8B84B"/>
<stop offset="100%" stop-color="#E8B84B" stop-opacity="0.7"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="68" rx="22" ry="28" fill="url(#petal)" opacity="0.85"/>
<ellipse cx="130" cy="85" rx="22" ry="28" fill="url(#petal)" opacity="0.8" transform="rotate(72 130 85)"/>
<ellipse cx="120" cy="115" rx="22" ry="28" fill="url(#petal)" opacity="0.75" transform="rotate(144 120 115)"/>
<ellipse cx="80" cy="115" rx="22" ry="28" fill="url(#petal)" opacity="0.8" transform="rotate(216 80 115)"/>
<ellipse cx="70" cy="85" rx="22" ry="28" fill="url(#petal)" opacity="0.85" transform="rotate(288 70 85)"/>
<circle cx="100" cy="95" r="14" fill="url(#center)"/>
<line x1="100" y1="125" x2="100" y2="180" stroke="#6DB87D" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
<ellipse cx="88" cy="155" rx="12" ry="8" fill="#6DB87D" opacity="0.6" transform="rotate(-20 88 155)"/>
<ellipse cx="112" cy="165" rx="10" ry="7" fill="#6DB87D" opacity="0.5" transform="rotate(15 112 165)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

src/assets/fallback-images/pilz.svg
+21
View File
@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<radialGradient id="cap" cx="50%" cy="40%" r="55%">
<stop offset="0%" stop-color="#E88BAE" stop-opacity="0.95"/>
<stop offset="100%" stop-color="#9B7DC4" stop-opacity="0.7"/>
</radialGradient>
<linearGradient id="stem" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#FFF8F0"/>
<stop offset="100%" stop-color="#E8F5E4"/>
</linearGradient>
</defs>
<ellipse cx="100" cy="100" rx="65" ry="45" fill="url(#cap)"/>
<rect x="80" y="100" width="40" height="55" rx="10" fill="url(#stem)" opacity="0.9"/>
<circle cx="80" cy="85" r="7" fill="#FFF8F0" opacity="0.8"/>
<circle cx="105" cy="78" r="5" fill="#FFF8F0" opacity="0.7"/>
<circle cx="120" cy="90" r="6" fill="#FFF8F0" opacity="0.75"/>
<circle cx="92" cy="95" r="4" fill="#FFF8F0" opacity="0.65"/>
<ellipse cx="100" cy="170" rx="30" ry="6" fill="#6DB87D" opacity="0.3"/>
<ellipse cx="75" cy="168" rx="8" ry="4" fill="#6DB87D" opacity="0.4"/>
<ellipse cx="125" cy="168" rx="8" ry="4" fill="#6DB87D" opacity="0.35"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

src/assets/fallback-images/reh.svg
+29
View File
@@ -0,0 +1,29 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<radialGradient id="fur" cx="50%" cy="40%" r="60%">
<stop offset="0%" stop-color="#D4A574" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#B8865A" stop-opacity="0.7"/>
</radialGradient>
<radialGradient id="spot" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFF8F0" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#FFF8F0" stop-opacity="0"/>
</radialGradient>
</defs>
<ellipse cx="105" cy="110" rx="40" ry="30" fill="url(#fur)"/>
<circle cx="85" cy="75" r="18" fill="url(#fur)"/>
<ellipse cx="75" cy="58" rx="6" ry="14" fill="url(#fur)" transform="rotate(-15 75 58)"/>
<ellipse cx="95" cy="58" rx="6" ry="14" fill="url(#fur)" transform="rotate(15 95 58)"/>
<ellipse cx="76" cy="56" rx="4" ry="10" fill="#E88BAE" opacity="0.3" transform="rotate(-15 76 56)"/>
<ellipse cx="94" cy="56" rx="4" ry="10" fill="#E88BAE" opacity="0.3" transform="rotate(15 94 56)"/>
<circle cx="79" cy="73" r="3" fill="#333" opacity="0.6"/>
<circle cx="91" cy="73" r="3" fill="#333" opacity="0.6"/>
<ellipse cx="85" cy="81" rx="3" ry="2" fill="#333" opacity="0.4"/>
<circle cx="100" cy="100" r="4" fill="url(#spot)"/>
<circle cx="112" cy="105" r="3" fill="url(#spot)"/>
<circle cx="95" cy="112" r="3.5" fill="url(#spot)"/>
<line x1="80" y1="138" x2="78" y2="170" stroke="#B8865A" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
<line x1="95" y1="138" x2="93" y2="170" stroke="#B8865A" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
<line x1="115" y1="138" x2="117" y2="170" stroke="#B8865A" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
<line x1="130" y1="135" x2="132" y2="170" stroke="#B8865A" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
<ellipse cx="105" cy="175" rx="35" ry="5" fill="#6DB87D" opacity="0.25"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

src/assets/fallback-images/schmetterling.svg
+24
View File
@@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<radialGradient id="lwing" cx="40%" cy="40%" r="60%">
<stop offset="0%" stop-color="#9B7DC4" stop-opacity="0.85"/>
<stop offset="100%" stop-color="#E88BAE" stop-opacity="0.5"/>
</radialGradient>
<radialGradient id="rwing" cx="60%" cy="40%" r="60%">
<stop offset="0%" stop-color="#E88BAE" stop-opacity="0.85"/>
<stop offset="100%" stop-color="#9B7DC4" stop-opacity="0.5"/>
</radialGradient>
</defs>
<ellipse cx="70" cy="85" rx="32" ry="38" fill="url(#lwing)" transform="rotate(-10 70 85)"/>
<ellipse cx="130" cy="85" rx="32" ry="38" fill="url(#rwing)" transform="rotate(10 130 85)"/>
<ellipse cx="75" cy="125" rx="22" ry="28" fill="url(#lwing)" opacity="0.7" transform="rotate(10 75 125)"/>
<ellipse cx="125" cy="125" rx="22" ry="28" fill="url(#rwing)" opacity="0.7" transform="rotate(-10 125 125)"/>
<ellipse cx="100" cy="105" rx="6" ry="35" fill="#6DB87D" opacity="0.8" rx="5"/>
<circle cx="78" cy="82" r="6" fill="#E8B84B" opacity="0.5"/>
<circle cx="122" cy="82" r="6" fill="#E8B84B" opacity="0.5"/>
<circle cx="100" cy="68" r="5" fill="#6DB87D" opacity="0.7"/>
<line x1="96" y1="65" x2="88" y2="50" stroke="#6DB87D" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
<line x1="104" y1="65" x2="112" y2="50" stroke="#6DB87D" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
<circle cx="87" cy="48" r="3" fill="#E8B84B" opacity="0.6"/>
<circle cx="113" cy="48" r="3" fill="#E8B84B" opacity="0.6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

src/assets/fallback-images/vogel.svg
+20
View File
@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<radialGradient id="body" cx="45%" cy="45%" r="55%">
<stop offset="0%" stop-color="#7DB8D4" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#6DB87D" stop-opacity="0.7"/>
</radialGradient>
<radialGradient id="wing" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#9B7DC4" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#7DB8D4" stop-opacity="0.5"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="105" rx="35" ry="28" fill="url(#body)"/>
<circle cx="100" cy="75" r="20" fill="url(#body)"/>
<ellipse cx="72" cy="100" rx="25" ry="15" fill="url(#wing)" transform="rotate(-15 72 100)"/>
<circle cx="94" cy="72" r="4" fill="#333" opacity="0.7"/>
<polygon points="115,73 130,70 115,77" fill="#E8B84B" opacity="0.9"/>
<line x1="90" y1="132" x2="90" y2="155" stroke="#E8B84B" stroke-width="3" stroke-linecap="round" opacity="0.8"/>
<line x1="110" y1="132" x2="110" y2="155" stroke="#E8B84B" stroke-width="3" stroke-linecap="round" opacity="0.8"/>
<ellipse cx="100" cy="160" rx="20" ry="4" fill="#6DB87D" opacity="0.25"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB