I have tried put two svg element to create a hollow mask. And I want to create the effect like clip-path inset, but the result doesn't work. How can I solve this? Or are there any ways to achieve same effect?
https://codepen.io/penny289/pen/Exvaeaq?editors=1000
body{margin:0}
.aurora{
width:100vw;
height:100vh;
}
.move1,.move2,.move3{
position: absolute;
width: 1px;
height: 1px;
border-radius: 100%;
opacity: 0.7;
border-radius:2%;
z-index:-2;
}
.move1{
box-shadow: 0 0 35vmax 35vmax #0D8BD9;
}
.move2{
box-shadow: 0 0 35vmax 35vmax #0ff;
}
.move3{
box-shadow: 0 0 35vmax 35vmax #94D7F2;
}<div class="aurora">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<mask id="mask1">
<path fill="black" d="M51,-41.9C63.3,-25.1,68.8,-4.1,65.3,16.4C61.8,37,49.5,57,33.3,62C17.1,67.1,-2.8,57.2,-24.3,47.8C-45.8,38.5,-68.9,29.7,-74.5,14.3C-80.2,-1.1,-68.5,-23.2,-53.2,-40.7C-37.9,-58.1,-19,-70.8,0.2,-70.9C19.3,-71.1,38.6,-58.6,51,-41.9Z" />
</mask>
<rect width="100vw" height="100vh" fill="white" mask="url(#mask1)"></rect>
</svg>
<div class="move1"></div>
<div class="move2"></div>
<div class="move3"></div>
</div>CodePudding user response：
A mask is just masking off everything by default - the same as creating a mask with a black rectangle that is 100% in height and width. You path has a black fill, so black black is still a 100% black mask.
I added a white rectangle in the mask, so that you can see the difference between masking with black/white.
And then your path was a bit off to the left/top, so I did a translate to place it inside the SVG viewbox.
body{margin:0}
.aurora{
width:100vw;
height:100vh;
}
.move1,.move2,.move3{
position: absolute;
width: 1px;
height: 1px;
border-radius: 100%;
opacity: 0.7;
border-radius:2%;
z-index:-2;
}
.move1{
box-shadow: 0 0 35vmax 35vmax #0D8BD9;
}
.move2{
box-shadow: 0 0 35vmax 35vmax #0ff;
}
.move3{
box-shadow: 0 0 35vmax 35vmax #94D7F2;
}<div class="aurora">
<svg viewBox="0 0 200 200" width="400" xmlns="http://www.w3.org/2000/svg">
<mask id="mask1">
<rect width="100%" height="100%" fill="white"/>
<path transform="translate(90 80)" fill="black" d="M51,-41.9C63.3,-25.1,68.8,-4.1,65.3,16.4C61.8,37,49.5,57,33.3,62C17.1,67.1,-2.8,57.2,-24.3,47.8C-45.8,38.5,-68.9,29.7,-74.5,14.3C-80.2,-1.1,-68.5,-23.2,-53.2,-40.7C-37.9,-58.1,-19,-70.8,0.2,-70.9C19.3,-71.1,38.6,-58.6,51,-41.9Z" />
</mask>
<rect width="100vw" height="100vh" fill="white" mask="url(#mask1)"></rect>
</svg>
<div class="move1"></div>
<div class="move2"></div>
<div class="move3"></div>
</div>