]>
Commit | Line | Data |
---|---|---|
1 | <script> | |
2 | import { browser } from '$app/environment'; | |
3 | import { canvas } from '$lib/stores/canvas'; | |
4 | ||
5 | const kDotSize = 32; | |
6 | ||
7 | $: { | |
8 | if (browser) { | |
9 | document.documentElement.style.setProperty('--dot-size', kDotSize + 'px'); | |
10 | document.documentElement.style.setProperty('--dot-x', kDotSize - $canvas.x % kDotSize + 'px'); | |
11 | document.documentElement.style.setProperty('--dot-y', kDotSize - $canvas.y % kDotSize + 'px'); | |
12 | } | |
13 | } | |
14 | </script> | |
15 | ||
16 | <div class="background"></div> | |
17 | ||
18 | <style> | |
19 | .background { | |
20 | position: fixed; | |
21 | top: 0; | |
22 | bottom: 0; | |
23 | user-select: none; | |
24 | pointer-events: none; | |
25 | background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size)); | |
26 | background-size: var(--dot-size) var(--dot-size); | |
27 | background-position: var(--dot-x) var(--dot-y); | |
28 | padding: 0; | |
29 | margin: 0; | |
30 | width: 100vw; | |
31 | height: 100vh; | |
32 | } | |
33 | </style> |