28 lines
1015 B
Svelte
28 lines
1015 B
Svelte
<script lang="ts">
|
|
// variant 0/1 = zwei leicht unterschiedliche Wolkenformen für Abwechslung.
|
|
let {
|
|
size = 100,
|
|
opacity = 1,
|
|
variant = 0,
|
|
fill = 'var(--c-cloud)',
|
|
stroke = '#cad6e8',
|
|
}: { size?: number; opacity?: number; variant?: number; fill?: string; stroke?: string } = $props();
|
|
</script>
|
|
|
|
<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} {stroke} 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="60" cy="32" rx="28" ry="22" />
|
|
<ellipse cx="90" cy="42" rx="22" ry="18" />
|
|
<rect x="22" y="42" width="76" height="18" rx="9" />
|
|
{/if}
|
|
</g>
|
|
</svg>
|