schmop/zahlzerlegung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ballon- und Wolken-Symbole mit Farb- und Formvarianten

Browse Source
This commit is contained in:
schmop 2026-05-31 17:28:34 +02:00
parent 564f5876b3
commit 3922089eff
2 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/components/svg/Balloon.svelte
View File

@ -1,10 +1,14 @@
<script lang="ts"> <script lang="ts">
let { size = 80 }: { size?: number } = $props(); let {
size = 80,
color = '#ff8aa8',
stroke = '#c25578',
}: { size?: number; color?: string; stroke?: string } = $props();
</script> </script>
<svg width={size} height={size} viewBox="0 0 80 110" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <svg width={size} height={size} viewBox="0 0 80 110" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<ellipse cx="40" cy="42" rx="30" ry="36" fill="#ff8aa8" stroke="#c25578" stroke-width="2" /> <ellipse cx="40" cy="42" rx="30" ry="36" fill={color} {stroke} stroke-width="2" />
<ellipse cx="30" cy="32" rx="8" ry="14" fill="#ffd0db" opacity="0.7" /> <ellipse cx="30" cy="32" rx="8" ry="14" fill="#ffffff" opacity="0.45" />
<path d="M36 78 L44 78 L42 84 L38 84 Z" fill="#c25578" /> <path d="M36 78 L44 78 L42 84 L38 84 Z" fill={stroke} />
<path d="M40 84 Q38 95 42 105" stroke="#5c3344" stroke-width="1.5" fill="none" /> <path d="M40 84 Q38 95 42 105" stroke="#5c3344" stroke-width="1.5" fill="none" />
</svg> </svg>

15
src/lib/components/svg/Cloud.svelte
View File

@ -1,12 +1,25 @@
<script lang="ts"> <script lang="ts">
let { size = 100, opacity = 1 }: { size?: number; opacity?: number } = $props(); // variant 0/1 = zwei leicht unterschiedliche Wolkenformen für Abwechslung.
let {
size = 100,
opacity = 1,
variant = 0,
}: { size?: number; opacity?: number; variant?: number } = $props();
</script> </script>
<svg width={size} height={size * 0.6} viewBox="0 0 120 70" xmlns="http://www.w3.org/2000/svg" {opacity} aria-hidden="true"> <svg width={size} height={size * 0.6} viewBox="0 0 120 70" xmlns="http://www.w3.org/2000/svg" {opacity} aria-hidden="true">
<g fill="var(--c-cloud)" stroke="#cad6e8" stroke-width="2"> <g fill="var(--c-cloud)" stroke="#cad6e8" stroke-width="2">
{#if variant === 1}
<ellipse cx="26" cy="44" rx="20" ry="16" />
<ellipse cx="52" cy="30" rx="24" ry="20" />
<ellipse cx="80" cy="36" rx="26" ry="22" />
<ellipse cx="100" cy="46" rx="16" ry="14" />
<rect x="20" y="44" width="84" height="18" rx="9" />
{:else}
<ellipse cx="30" cy="42" rx="22" ry="18" /> <ellipse cx="30" cy="42" rx="22" ry="18" />
<ellipse cx="60" cy="32" rx="28" ry="22" /> <ellipse cx="60" cy="32" rx="28" ry="22" />
<ellipse cx="90" cy="42" rx="22" ry="18" /> <ellipse cx="90" cy="42" rx="22" ry="18" />
<rect x="22" y="42" width="76" height="18" rx="9" /> <rect x="22" y="42" width="76" height="18" rx="9" />
{/if}
</g> </g>
</svg> </svg>