Save WIP

[rbdr/canvas] / src / lib / components / background.svelte

<script>
	import { browser } from '$app/environment';
	import { canvas } from '$lib/stores/canvas';

	const kDotSize = 32;

	$: {
		if (browser) {
			document.documentElement.style.setProperty('--dot-size', kDotSize + 'px');
			document.documentElement.style.setProperty(
				'--dot-x',
				kDotSize - ($canvas.x % kDotSize) + 'px'
			);
			document.documentElement.style.setProperty(
				'--dot-y',
				kDotSize - ($canvas.y % kDotSize) + 'px'
			);
		}
	}
</script>

<div class="background" />

<style>
	.background {
		position: fixed;
		top: 0;
		bottom: 0;
		user-select: none;
		pointer-events: none;
		background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
		background-size: var(--dot-size) var(--dot-size);
		background-position: var(--dot-x) var(--dot-y);
		padding: 0;
		margin: 0;
		width: 100vw;
		height: 100vh;
	}
</style>