<svg width="262" height="325" viewBox="0 0 272 325" id="duck">
  <path d="M117.64 318.91C113.18 318.91 109.58 315.54 109.59 311.35L109.69 266.83C109.69 262.65 113.32 259.25 117.77 259.24C122.23 259.24 125.83 262.61 125.82 266.8L125.72 311.32C125.72 315.5 122.09 318.9 117.64 318.91Z" fill="orange" class="leg left"/>
  <path d="M171.53 318.81C167.07 318.81 163.47 315.44 163.48 311.25L163.58 266.73C163.58 262.55 167.21 259.15 171.66 259.14C176.12 259.14 179.72 262.51 179.71 266.7L179.61 311.22C179.61 315.4 175.98 318.8 171.53 318.81Z" fill="orange" class="leg right"/>
  <path d="M171.68 288.15C150.4 288.19 133.18 272.03 133.22 252.06L133.24 241.83C133.28 221.85 150.57 205.63 171.86 205.58C193.14 205.54 210.36 221.7 210.32 241.67L210.3 251.9C210.26 271.88 192.97 288.1 171.68 288.15Z" fill="brown" class="thigh right"/>
  <path d="M120.6 285.22C108.98 285.22 98.1901 280.82 90.2201 272.82C84.2301 266.81 80.4202 259.3 79.2002 251.21C60.0002 247.16 42.5601 237.34 29.6001 223.18C15.1101 207.36 7.1602 187.1 7.2102 166.12C7.2402 151.67 19.5801 139.89 34.7201 139.86L141.8 139.65L141.97 60.23C142.03 31.04 167.18 7.23999 198.03 7.17999H198.15C213.67 7.17999 228.07 13.05 238.71 23.71C248.54 33.57 253.94 46.48 253.91 60.07L253.67 167.7C253.67 172.33 253.02 176.92 251.76 181.36C253.13 186.19 253.82 191.19 253.81 196.24C253.74 227.54 226.77 253.05 193.68 253.12L161.88 253.18C160.22 261.03 156.1 268.23 149.91 273.92C142.03 281.17 131.65 285.18 120.69 285.2H120.6V285.22Z" fill="white" class="body"/>
  <path d="M198.14 14.38C225.03 14.38 246.76 34.81 246.71 60.06L246.47 167.69C246.46 172.45 245.67 177.05 244.23 181.37C245.79 186.06 246.63 191.05 246.61 196.23C246.55 223.62 222.84 245.87 193.66 245.93L155.5 246.01C155.06 263.71 139.63 277.98 120.67 278.02C120.67 278.02 120.62 278.02 120.6 278.02C101.43 278.02 85.9302 263.45 85.9702 245.45V245.13C45.3102 239.08 14.3102 206.05 14.4002 166.15C14.4202 155.63 23.5202 147.09 34.7302 147.07L148.98 146.84L149.17 60.26C149.23 34.98 171.11 14.44 198.04 14.39C198.04 14.39 198.11 14.39 198.14 14.39M198.14 0H198.02C163.21 0.07 134.85 27.09 134.77 60.23L134.61 132.48L34.6902 132.68C15.6002 132.72 0.0402163 147.72 0.000216302 166.12C-0.0497837 188.91 8.57018 210.9 24.2802 228.06C37.2102 242.18 54.2502 252.29 73.0902 257.18C75.1502 264.9 79.2402 272.03 85.1202 277.92C94.4602 287.28 107.05 292.43 120.6 292.43H120.71C133.47 292.4 145.57 287.72 154.78 279.25C160.57 273.92 164.82 267.47 167.32 260.4L193.7 260.35C211.48 260.31 228.24 253.75 240.91 241.85C253.83 229.72 260.97 213.54 261 196.29C261.01 191.25 260.41 186.25 259.2 181.39C260.29 176.93 260.85 172.36 260.86 167.75L261.1 60.12C261.13 44.6 254.99 29.88 243.79 18.66C231.79 6.64 215.58 0.00997925 198.14 0.00997925V0Z" fill="powderblue" class="body-outline"/>
  <path d="M212.278 64.5701C221.082 64.2811 227.999 57.3481 227.728 49.0849C227.457 40.8216 220.1 34.3572 211.296 34.6462C202.491 34.9352 195.574 41.8681 195.845 50.1314C196.117 58.3946 203.474 64.859 212.278 64.5701Z" fill="#333333" class="eye right"/>
  <path d="M212.278 64.5701C221.082 64.2811 227.999 57.3481 227.728 49.0849C227.457 40.8216 220.1 34.3572 211.296 34.6462C202.491 34.9352 195.574 41.8681 195.845 50.1314C196.117 58.3946 203.474 64.859 212.278 64.5701Z" fill="#333333" class="eye left"/>
  <path d="M145.75 223.72L114.55 223.78C88.6203 223.83 67.6403 204.14 67.6903 179.8C67.7103 172.37 74.1403 166.33 82.0603 166.31L145.87 166.18C162.8 166.15 176.49 179 176.45 194.88C176.42 210.77 162.67 223.67 145.74 223.7L145.75 223.72Z" fill="brown" class="wing"/>
  <path d="M155.72 316.72C155.72 312.54 159.35 309.14 163.8 309.13L211.23 309.04C215.69 309.04 219.29 312.41 219.28 316.6C219.28 320.78 215.65 324.18 211.2 324.19L163.77 324.28C159.31 324.28 155.71 320.91 155.72 316.72Z" fill="orange" class="foot right"/>
  <path d="M97.9602 316.83C97.9602 312.65 101.59 309.25 106.04 309.24L153.47 309.15C157.93 309.15 161.53 312.52 161.52 316.71C161.52 320.89 157.89 324.29 153.44 324.3L106.01 324.39C101.55 324.39 97.9502 321.02 97.9602 316.83Z" fill="orange" class="foot left"/>
  <path d="M121.18 75.2899C121.2 67.5999 127.85 61.35 136.05 61.34L177.1 61.2599C185.29 61.2399 191.92 67.4599 191.9 75.1599C191.88 82.8499 185.23 89.0999 177.03 89.1099L135.98 89.19C127.79 89.21 121.16 82.9899 121.18 75.2899Z" fill="orange" class="bill"/>
</svg>

<fieldset id="updater">
  <legend>Update Speed</legend>
  <label>
    <input type="radio" name="update-speed" value="none"> none
  </label>
  <label>
    <input type="radio" name="update-speed" value="slow"> slow
  </label>
  <label>
    <input type="radio" name="update-speed" value="fast" checked> fast
  </label>
</fieldset>

@layer demo {
  svg {
    --bill-x: 40px;
    --right-eye-x: 0px;
    --left-eye-x: -30px;
    
    .eye.right {
      transform: translateX(clamp(-25px, var(--right-eye-x), 25px));
    }
    
    .eye.left {
      transform: translateX(clamp(-55px, var(--left-eye-x), -5px));
    }
    
    .bill {
      transform: translateX(clamp(0px, var(--bill-x), 80px));
    }
  }
}

@layer demo.support {
  html {
    block-size: 100%;
    color-scheme: dark light;
    background: #eee;
    
    @media (prefers-color-scheme: dark) {
      background: #222;
    }
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 5vmin;
  }
  
  fieldset {
    max-inline-size: max-content;
    border: none;
    display: flex;
    gap: 3ch;
    
    > label {
      display: flex;
      place-items: center;
      gap: 1ch;
      
      > input {
        margin: 0;
      }
    }
  }
}

const {left, width} = duck.getBoundingClientRect()
let speed = 'fast'

window.onmousemove = e => {
  const relPos = e.clientX - left
  
  const center = {
    x: width * .75
  }
  
  if (speed === 'fast') {
    if (relPos > center.x) {
      let diffX = parseInt((relPos - center.x).toFixed())
      duck.style.setProperty('--bill-x', (40 + diffX) + 'px')
      duck.style.setProperty('--right-eye-x', (diffX / 1.5) + 'px')
      duck.style.setProperty('--left-eye-x', (-30 + diffX / 1.5) + 'px')
    }
    else if (relPos < center.x) {
      let diffX = parseInt((center.x - relPos).toFixed())
      duck.style.setProperty('--bill-x', (40 - diffX) + 'px')
      duck.style.setProperty('--right-eye-x', (0 - diffX / 1.5) + 'px')
      duck.style.setProperty('--left-eye-x', (-30 - diffX / 1.5) + 'px')
    }
  }
  else if (speed === 'slow') {
    if (relPos > center.x) {
      duck.style.setProperty('--bill-x', '80px')
      duck.style.setProperty('--right-eye-x', '30px')
      duck.style.setProperty('--left-eye-x', '0px')
    }
    else if (relPos < center.x) {
      duck.style.setProperty('--bill-x', '0px')
      duck.style.setProperty('--right-eye-x', '-25px')
      duck.style.setProperty('--left-eye-x', '-55px')
    }
  }
}

updater.oninput = e => {
  speed = e.target.value
}