Partially render the boxes

[rbdr/canvas] / src / lib / components / background.svelte

<script>
  import { browser } from '$app/env';
  import { canvas } from '$lib/stores/canvas';

  const kDotSize = 32;

  $: {
    if (browser) {
      document.documentElement.style.setProperty('--dot-size', kDotSize + 'px');
      document.documentElement.style.setProperty('--dot-x', kDotSize - $canvas.x % kDotSize + 'px');
      document.documentElement.style.setProperty('--dot-y', kDotSize - $canvas.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>