I am trying to create a “light source” effect in SVG, whereby I cut out part of a dark area that will overlap the image.

I almost got what I needed, but I'm trying to figure out how to finish the last part. First, here is my example:

.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>

What I want to do now is to stretch the black fill to the rest of the SVG , but at the same time preserve the radial gradient.

I just can not figure out how to do it. In fact, the extra <rect> inside <mask> that I forgot to remove is my attempt to implement this.

The effect I'm trying to get:

enter image description here

But so far I have the closest gradient, which increases the radius of the circle, and the transparency area increases; this is not exactly what I want to get, as in the figure above.

Am I missing something very simple?

Translation question: Extend SVG Mask without stretching? @Ian

1 answer 1

Simply apply a gradient to the rectangle. No need for extra lap.

You need to change your gradient slightly.

 .background { width: 500px; height: 500px; background: red; } .light { fill: black; } 
 <div class="background"> <svg width="500" height="500"> <defs> <radialGradient id="radGrad" r="0.31"> <stop offset="0" stop-color="black" /> <stop offset="1" stop-color="white" /> </radialGradient> <mask id="hole"> <rect x="0" y="0" width="500" height="500" fill="url(#radGrad)" /> </mask> </defs> <rect class="light" x="0" y="0" width="500" height="500" mask="url(#hole)" /> </svg> </div>

Translation answer: Extend SVG Mask without stretching? @Paul LeBeau