blob: 76649396725e2af54b2254b6a5e04b26e963765b (
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
|
<script>
import { browser } from '$app/env';
export let x;
export let y;
const kDotSize = 32;
$: {
if (browser) {
document.documentElement.style.setProperty('--dot-size', kDotSize + 'px');
document.documentElement.style.setProperty('--dot-x', kDotSize - x % kDotSize + 'px');
document.documentElement.style.setProperty('--dot-y', kDotSize - y % kDotSize + 'px');
}
}
</script>
<div class="background"></div>
<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>
|
