gaussianBlurMatrix.ts

// Adapted from: https://digitalbunker.dev/2020/09/13/understanding-gaussian-blurs/
function gaussianBlurMatrix(blurRadius: number) {
  if (blurRadius !== Math.round(blurRadius) || blurRadius <= 0) {
    throw Error('Blur radius must be a positive integer')
  }

  const kernel: number[] = []
  const kernelWidth = 1 + 2 * blurRadius
  const kernelSize = kernelWidth * kernelWidth

  const sigma = Math.max(1, blurRadius / 2)
  const exponentDenominator = 2 * sigma * sigma

  let sum = 0
  for (let i = 0; i < kernelSize; i++) {
    // Distance from center pixel
    const x = (i % kernelWidth) - blurRadius
    const y = Math.floor(i / kernelWidth) - blurRadius

    const exponentNumerator = -(x * x + y * y)
    const kernelValue =
      Math.pow(Math.E, exponentNumerator / exponentDenominator) /
      (Math.PI * exponentDenominator)

    kernel[i] = kernelValue
    sum += kernelValue
  }

  return kernel.reduce(
    (matrix, k, i) =>
      matrix + k / sum + (i % kernelWidth == kernelWidth - 1 ? '\n' : ' '),
    ''
  )
}

You can use this with feConvolveMatrix

<feConvolveMatrix order={1 + 2 * blurRadius} kernelMatrix={gaussianBlurMatrix(blurRadius)} edgeMode="duplicate" />