Bokeh effect for a website background

<canvas id="bokeh" style="position:fixed;inset:0;width:100%;height:100%;background:#0b0d16"></canvas>
<script>
const canvas = document.getElementById('bokeh')
const g = canvas.getContext('2d')
const COLORS = ['255,190,110', '120,220,255', '255,120,170', '255,255,255']
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
let w, h
function size() {
  const dpr = Math.min(devicePixelRatio, 2)
  w = canvas.width = innerWidth * dpr
  h = canvas.height = innerHeight * dpr
}
size(); addEventListener('resize', size)
const lights = Array.from({ length: 60 }, () => {
  const depth = Math.random() // 0 far, 1 near
  return {
    x: Math.random(), y: Math.random(), depth,
    r: 0.01 + depth * 0.06, // share of the screen width
    c: COLORS[Math.floor(Math.random() * COLORS.length)],
    phase: Math.random() * 6.28,
  }
})
function frame(t) {
  const s = t / 1000
  g.globalCompositeOperation = 'source-over'
  g.fillStyle = '#0b0d16'; g.fillRect(0, 0, w, h)
  g.globalCompositeOperation = 'lighter'
  for (const l of lights) {
    const x = ((l.x + (still ? 0 : s * 0.004 * (0.3 + l.depth))) % 1) * w
    const y = l.y * h + Math.sin(s * 0.3 + l.phase) * 12
    const r = l.r * w
    const a = (0.12 + 0.18 * (1 - l.depth)) * (0.8 + 0.2 * Math.sin(s + l.phase))
    const disc = g.createRadialGradient(x, y, 0, x, y, r)
    disc.addColorStop(0, 'rgba(' + l.c + ',' + a * 0.6 + ')')
    disc.addColorStop(0.75, 'rgba(' + l.c + ',' + a + ')')
    disc.addColorStop(1, 'rgba(' + l.c + ',0)')
    g.fillStyle = disc
    g.beginPath(); g.arc(x, y, r, 0, Math.PI * 2); g.fill()
  }
  if (!still) requestAnimationFrame(frame)
}
requestAnimationFrame(frame)
</script>