*
  box-sizing border-box
  
body
  min-height 100vh
  background url("https://assets.codepen.io/605876/code-icon-bg.svg") calc(var(--x, 0) * (var(--coefficient, 1px))) calc(var(--y, 0) * var(--coefficient, 1px)) / 120px 120px
  background-color hsl(10, 80%, 90%)

import { GUI } from 'https://cdn.skypack.dev/dat.gui'

const CONFIG = {
  COEFFICIENT: 1
}


const mapRange = (inputLower, inputUpper, outputLower, outputUpper) => {
  const INPUT_RANGE = inputUpper - inputLower
  const OUTPUT_RANGE = outputUpper - outputLower
  return value => outputLower + (((value - inputLower) / INPUT_RANGE) * OUTPUT_RANGE || 0)
}
const BOUNDS = 100      
const update = ({ x, y }) => {
  const POS_X = mapRange(0, window.innerWidth, -BOUNDS, BOUNDS)(x)
  const POS_Y = mapRange(0, window.innerHeight, -BOUNDS, BOUNDS)(y)
  document.body.style.setProperty('--x', POS_X)
  document.body.style.setProperty('--y', POS_Y)
}

document.addEventListener('pointermove', update)

const CONTROLLER = new GUI()

CONTROLLER.add(CONFIG, 'COEFFICIENT', 0, 2, 0.1).name('Coefficient (px)').onChange(() => {
  document.documentElement.style.setProperty('--coefficient', `${CONFIG.COEFFICIENT}px`)
})