This page now mirrors the CodePen structure you pointed out:
one div with two delayed mask layers, and one with the same masks plus
backdrop-filter.
Both mask URLs are live delayed SVG endpoints (2s and 5s).
Div with a 2s mask and a 5s mask:
<div class="masks"></div>
Div with a backdrop-filter and 2s mask and a 5s mask:
<div class="bf-blur masks"></div>body {
background-color: pink;
}
.masks {
width: 100px;
height: 100px;
background: blue;
mask-image: url("https://d47y4htwwie6rur7xobgcjvbee0erwrf.lambda-url.us-east-1.on.aws/?delay=2000"),
url("https://d47y4htwwie6rur7xobgcjvbee0erwrf.lambda-url.us-east-1.on.aws/?delay=5000");
-webkit-mask-repeat: repeat, no-repeat;
mask-repeat: repeat, no-repeat;
-webkit-mask-size: 25% 25%, cover;
mask-size: 25% 25%, cover;
-webkit-mask-position: center;
mask-position: center;
mask-mode: alpha;
color: red;
}
.bf-blur {
backdrop-filter: invert(20%);
}