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('--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>