html,body {

    width: 100%;

    height: 100%;

    filter: contrast(5);

}

​

div {

    position: relative;

    width: 100%;

    height: 100%;

    background: #fff;

    &::before {

        content: "";

        position: absolute;

        top: 0; right: 0; bottom: 0; left: 0;

        background: radial-gradient(#0044aa, transparent);

        background-size: 20px 20px;

        mask: repeating-radial-gradient(circle at 35% 65%, red, rgba(255, 0, 0, .5), #000 25%);

        animation: maskMove 20s infinite ease-in-out alternate;

    }

}

​

@keyframes maskMove {

    @for $i from 0 through 100 { 

        #{$i}% {

            mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .6), #000 #{$i / 3 + 10 + '%'});

            filter: hue-rotate(#{$i * 3.6 + 'deg'})

        }

    }

}