blob: 20b9e37980511852d0aea5bce1b2f283c32bd017 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<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>
|
