git.r.bdr.sh - rbdr/canvas/blob - src/lib/components/background.svelte

   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(
  11                                 '--dot-x',
  12                                 kDotSize - ($canvas.x % kDotSize) + 'px'
  13                         );
  14                         document.documentElement.style.setProperty(
  15                                 '--dot-y',
  16                                 kDotSize - ($canvas.y % kDotSize) + 'px'
  17                         );
  18                 }
  19         }
  20 </script>
  21
  22 <div class="background" />
  23
  24 <style>
  25         .background {
  26                 position: fixed;
  27                 top: 0;
  28                 bottom: 0;
  29                 user-select: none;
  30                 pointer-events: none;
  31                 background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
  32                 background-size: var(--dot-size) var(--dot-size);
  33                 background-position: var(--dot-x) var(--dot-y);
  34                 padding: 0;
  35                 margin: 0;
  36                 width: 100vw;
  37                 height: 100vh;
  38         }
  39 </style>