Quadratic Bézier fun

Warning: this snippet uses new features which may not be avaliable in all browsers. Please view it with the latest version of your browser to ensure the best result.

Full page view

Description

Draw a quadratic Bézier curve then press the q key to manipulate it with the pointer lock.

Created on 4 Sept 2026.

#javascript #svg

Code

<svg style='
  position: fixed;
  top: 0;
  left: 0;
  background: #1d0010;
'>
  <path stroke='#fff' fill='none' stroke-width='2' />
</svg>

<script type='module'>
  const svg = document.querySelector('svg'),
    path = document.querySelector('path');

  let i = 0,
    d = 'T',
    start = [50, 0, 50, 50],
    setD = () => path.setAttribute('d', 'm0,0Q' + start.join(' ') + d);

  onkeydown = ({ key }) => {
    if (key === 'q') {
      if (!document.pointerLockElement) {
        svg.requestPointerLock().catch(e => console.log('Failed to enter pointer lock', e));
      } else {
        document.exitPointerLock();
      }
    }
  }

  onpointermove = ({ x, y, movementX, movementY }) => {
    requestAnimationFrame(() => {
    if (document.pointerLockElement) {
      start[0] += movementX;
      start[1] += movementY;
      setD();
    }
    })
  }

  svg.onpointerdown = ({ x, y }) => {
    d += [x, y, ''];
    setD();
  }

  (onresize = () => {
    svg.setAttribute('viewBox', [0, 0, innerWidth, innerHeight]);
  })();
</script>