Расширить маску SVG без stretching?

Я пытаюсь создать эффект «источника света» в SVG, посредством чего вырезаю часть темной области, которая будет покрывать изображение.

Я почти получил то, что мне нужно, но я изо всех сил пытаюсь понять, как закончить последнюю часть. Сначала вот мой пример:

.background { 
  width: 500px; 
  height: 500px; 
  background: red; 
} 
 
.light { 
  fill: black; 
}

<div class="background"> 
  <svg width="500" height="500"> 
    <defs> 
      <radialGradient id="radGrad"> 
        <stop offset="0" stop-color="white" stop-opacity="0" /> 
        <stop offset="1" stop-color="white" stop-opacity="1" /> 
      </radialGradient> 
      <mask id="hole"> 
        <rect x="0" y="0" width="500" height="500" fill="black"></rect> 
        <circle cx="250" cy="250" r="155" fill="url(#radGrad)" /> 
      </mask> 
    </defs> 
    <rect class="light" x="0" y="0" width="500" height="500" mask="url(#hole)"></rect> 
  </svg> 
</div>

То, что я хочу сделать сейчас, - это растянуть черную заливку на остальную часть SVG, но при этом сохранить радиальный градиент.

Я просто не могу понять, как это сделать. Фактически, дополнительный <rect> внутри <mask>, который я забыл удалить, является моей попыткой реализовать это.

Эффект, который я пытаюсь получить:

Но до сих пор ближайший градиент у меня есть, который увеличивает радиус круга, и при этом увеличивается область прозрачности, это не совсем то, что я хочу получить, как на рисунке выше.

Я упускаю что-то очень простое?

Перевод вопроса: Extend SVG Mask without stretching? @Ian