| <script lang="ts"> |
| /* Topographic contour backdrop — decorative abstract texture. */ |
| interface Props { |
| opacity?: number; |
| stroke?: string; |
| } |
| let { opacity = 0.16, stroke = 'var(--line)' }: Props = $props(); |
|
|
| const rings = [ |
| 'M120 40C200 20 360 30 470 90 560 140 560 250 470 300 360 360 180 350 110 290 50 240 50 80 120 40Z', |
| 'M150 80C220 65 350 75 440 125 510 165 510 245 440 285 350 335 200 325 145 275 95 230 95 115 150 80Z', |
| 'M185 120C245 110 340 120 410 160 465 192 465 240 410 270 340 305 225 297 180 257 140 222 140 150 185 120Z', |
| 'M220 158C268 150 330 160 382 192 422 217 422 245 382 266 330 293 250 287 215 255 185 227 185 178 220 158Z' |
| ]; |
| </script> |
|
|
| <svg |
| class="topo" |
| viewBox="0 0 600 380" |
| preserveAspectRatio="xMidYMid slice" |
| aria-hidden="true" |
| style="position:absolute;inset:0;width:100%;height:100%;opacity:{opacity};pointer-events:none" |
| > |
| { |
| <path {d} fill="none" {stroke} stroke-width={i === 1 ? 2 : 1.4} /> |
| {/each} |
| </svg> |
|
|
