<script lang="ts">
  let { size = 100, opacity = 1 }: { size?: number; opacity?: number } = $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="var(--c-cloud)" stroke="#cad6e8" stroke-width="2">
    <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" />
  </g>
</svg>
