<svg id='example' viewBox='0 0 100 100'>
    <defs>
        <mask id='mask-1' x='0' y='0' width='100' height='100'>
            <rect class='part' x='0' y='0'  width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='10' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='20' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='30' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='40' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='50' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='60' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='70' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='80' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='90' width='0' height='10.2' fill='#fff' />
            <rect class='full' x='0' y='0' width='100' height='100' fill='#fff' opacity='0' />
        </mask>
        <mask id='mask-2' x='0' y='0' width='100' height='100'>
            <rect class='part' x='0'  y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='10' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='20' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='30' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='40' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='50' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='60' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='70' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='80' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='90' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='full' x='0' y='0' width='100' height='100' fill='#fff' opacity='0' />
        </mask>
        <mask id='mask-3' x='0' y='0' width='100' height='100'>
            <rect class='part' x='100' y='0'  width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='10' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='20' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='30' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='40' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='50' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='60' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='70' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='80' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='90' width='100' height='10.2' fill='#fff' />
            <rect class='full' x='0' y='0' width='100' height='100' fill='#fff' opacity='0' />
        </mask>
        <mask id='mask-4' x='0' y='0' width='100' height='100'>
            <rect class='part' x='0'  y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='10' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='20' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='30' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='40' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='50' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='60' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='70' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='80' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='90' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='full' x='0' y='0' width='100' height='100' fill='#fff' opacity='0' />
        </mask>
    </defs>
    <image width='100' height='100' xlink:href='https://picsum.photos/500/500?image=1021' />
    <image width='100' height='100' xlink:href='https://picsum.photos/500/500?image=1022' mask='url(#mask-1)' />
    <image width='100' height='100' xlink:href='https://picsum.photos/500/500?image=1019' mask='url(#mask-2)' />
    <image width='100' height='100' xlink:href='https://picsum.photos/500/500?image=950' mask='url(#mask-3)' />
    
    <image width='100' height='100' xlink:href='https://picsum.photos/500/500?image=1021' mask='url(#mask-4)'/>
</svg>

body {
    background: #1c1c1c;
}

#example {
    display: block;
    margin: 5vmin auto;
    width: 90vmin;
    box-shadow: 0 0 20px rgba(0, 0, 0, .7);
}
View Compiled
let timeline = anime.timeline({
    loop: true
});

timeline
    .add({
        targets: '#mask-1 .part',
        width: 100,
        easing: 'easeInOutQuad',
        delay: function(el, i, l) {
            return 700 * Math.random();
        }
    })
    .add({
        targets: '#mask-2 .part',
        height: 100,
        easing: 'easeInOutQuad',
        delay: function(el, i, l) {
            return 700 * Math.random();
        }
    })
    .add({
        targets: '#mask-3 .part',
        x: 0,
        easing: 'easeInOutQuad',
        delay: function(el, i, l) {
            return 700 * Math.random();
        }
    })
    .add({
        targets: '#mask-4 .part',
        y: 0,
        easing: 'easeInOutQuad',
        delay: function(el, i, l) {
            return 700 * Math.random();
        }
    });
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js