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

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