an svg grid svelte component

grid.md

Svelte SVG Grid

parameter	description
radius	length from edge of the viewbox to the center (essentialy width/2)
count	number of lines
color	stroke color of lines
opacity	stroke opacity of lines

<script lang="ts">
	export let radius = 1;
	export let count = 10;
	export let color = 'lightgray';
	export let opacity = 1;

	const diameter = 2 * radius;
	const s = diameter / (1 + count);
</script>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {diameter} {diameter}">
	<g stroke={color} stroke-width="1%" stroke-opacity={opacity}>
		{#each { length: count } as _, i}
			{@const p = (i + 1) * s}
			<line x1={p} y1="0" x2={p} y2={diameter} />
			<line x1="0" y1={p} x2={diameter} y2={p} />
		{/each}
	</g>
</svg>