Create the sensor, move values to config

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

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

  export let x;
  export let y;

  const kDotSize = 32;

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