Andrej StevanovskiandClaude Opus 5.5
4b3c90cb8e
Die CSS-Masken-Fassung war in Safari unsichtbar. Jetzt vorgefärbte SVG-Kacheln (assets/decor/*.svg) als normales Hintergrundbild. Kachel 420 -> 600px, Handy 440px. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
89 lines
4.0 KiB
XML
89 lines
4.0 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420">
|
|
<!-- Decor-Ebene (Handoff-DS: "Decor — flat decorative layer, variant, opacity").
|
|
Einfarbige Spielzeug-Silhouetten, Quelle fuer die eingefaerbten Varianten
|
|
daneben (warm, cool, rose, sky, sun, hero-shop, hero-verein). Kachel 420x420, nahtlos. -->
|
|
<defs>
|
|
<!-- Teddy -->
|
|
<g id="teddy">
|
|
<circle cx="-15" cy="-26" r="8"/><circle cx="15" cy="-26" r="8"/>
|
|
<circle cx="0" cy="-14" r="17"/>
|
|
<ellipse cx="0" cy="16" rx="18" ry="19"/>
|
|
<circle cx="-19" cy="6" r="7"/><circle cx="19" cy="6" r="7"/>
|
|
<circle cx="-12" cy="33" r="8"/><circle cx="12" cy="33" r="8"/>
|
|
</g>
|
|
<!-- Quietscheente -->
|
|
<g id="duck">
|
|
<path d="M-28 4 C-28 -6 -18 -10 -8 -8 L14 -8 C24 -8 30 0 30 8 C30 22 16 26 0 26 C-18 26 -28 18 -28 4 Z"/>
|
|
<circle cx="10" cy="-18" r="13"/>
|
|
<path d="M21 -20 L34 -15 L21 -11 Z"/>
|
|
<path d="M-30 -4 L-20 -2 L-24 8 Z"/>
|
|
</g>
|
|
<!-- Spielzeugauto -->
|
|
<g id="car">
|
|
<path d="M-32 6 L-32 -6 Q-32 -10 -28 -10 L-16 -10 L-8 -22 L14 -22 L22 -10 L28 -10 Q32 -10 32 -6 L32 6 Z"/>
|
|
<circle cx="-17" cy="8" r="8"/><circle cx="17" cy="8" r="8"/>
|
|
</g>
|
|
<!-- Ball -->
|
|
<g id="ball">
|
|
<path fill-rule="evenodd" d="M0 -22 A22 22 0 1 1 0 22 A22 22 0 1 1 0 -22 Z M-3 -19 C-12 -8 -12 8 -3 19 L3 19 C-6 8 -6 -8 3 -19 Z"/>
|
|
</g>
|
|
<!-- Bauklotz -->
|
|
<g id="block">
|
|
<path fill-rule="evenodd" d="M-18 -22 H18 Q22 -22 22 -18 V18 Q22 22 18 22 H-18 Q-22 22 -22 18 V-18 Q-22 -22 -18 -22 Z M-8 -12 V12 H2 Q10 12 10 5 Q10 0 5 -1 Q9 -3 9 -7 Q9 -12 1 -12 Z M-3 -8 V-3 H1 Q4 -3 4 -5.5 Q4 -8 1 -8 Z M-3 1 V8 H2 Q5 8 5 4.5 Q5 1 2 1 Z"/>
|
|
</g>
|
|
<!-- Rassel -->
|
|
<g id="rattle">
|
|
<circle cx="0" cy="-16" r="15"/>
|
|
<rect x="-3.5" y="-4" width="7" height="30" rx="3.5"/>
|
|
<circle cx="0" cy="28" r="6"/>
|
|
</g>
|
|
<!-- Stern -->
|
|
<g id="star">
|
|
<path d="M0 -22 L6.5 -7 L22 -6.5 L10 4 L14 20 L0 11 L-14 20 L-10 4 L-22 -6.5 L-6.5 -7 Z" stroke-linejoin="round"/>
|
|
</g>
|
|
<!-- Luftballon -->
|
|
<g id="balloon">
|
|
<ellipse cx="0" cy="-10" rx="15" ry="19"/>
|
|
<path d="M-4 8 L4 8 L0 13 Z"/>
|
|
<path d="M0 13 C5 20 -5 26 1 34" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round"/>
|
|
</g>
|
|
<!-- Stapelturm -->
|
|
<g id="rings">
|
|
<rect x="-2.5" y="-30" width="5" height="12" rx="2.5"/>
|
|
<circle cx="0" cy="-30" r="4.5"/>
|
|
<ellipse cx="0" cy="-14" rx="10" ry="6"/>
|
|
<ellipse cx="0" cy="-2" rx="15" ry="7"/>
|
|
<ellipse cx="0" cy="12" rx="20" ry="8"/>
|
|
<rect x="-24" y="19" width="48" height="6" rx="3"/>
|
|
</g>
|
|
<!-- Herz -->
|
|
<g id="heart">
|
|
<path d="M0 18 C-14 8 -22 0 -22 -8 A10 10 0 0 1 0 -14 A10 10 0 0 1 22 -8 C22 0 14 8 0 18 Z"/>
|
|
</g>
|
|
<!-- Segelboot -->
|
|
<g id="boat">
|
|
<path d="M2 -28 L2 6 L24 6 Z"/>
|
|
<path d="M-2 -20 L-2 6 L-16 6 Z"/>
|
|
<path d="M-26 10 L26 10 L18 22 L-18 22 Z"/>
|
|
</g>
|
|
</defs>
|
|
<g fill="#000">
|
|
<use href="#teddy" transform="translate(58 62) rotate(-12)"/>
|
|
<use href="#star" transform="translate(170 36) rotate(14) scale(.8)"/>
|
|
<use href="#car" transform="translate(282 70) rotate(8)"/>
|
|
<use href="#ball" transform="translate(384 30) rotate(-20) scale(.85)"/>
|
|
<use href="#balloon" transform="translate(150 150) rotate(10)"/>
|
|
<use href="#duck" transform="translate(40 190) rotate(6)"/>
|
|
<use href="#block" transform="translate(262 170) rotate(-10)"/>
|
|
<use href="#heart" transform="translate(370 150) rotate(12) scale(.8)"/>
|
|
<use href="#rings" transform="translate(80 312) rotate(-6)"/>
|
|
<use href="#rattle" transform="translate(200 270) rotate(-35)"/>
|
|
<use href="#boat" transform="translate(330 270) rotate(6)"/>
|
|
<use href="#star" transform="translate(20 400) rotate(-8) scale(.6)"/>
|
|
<use href="#star" transform="translate(440 400) rotate(-8) scale(.6)"/>
|
|
<use href="#ball" transform="translate(250 380) rotate(30) scale(.7)"/>
|
|
<use href="#heart" transform="translate(160 390) rotate(-14) scale(.6)"/>
|
|
<use href="#teddy" transform="translate(390 368) rotate(10) scale(.75)"/>
|
|
</g>
|
|
</svg>
|