<svg id='preloader' viewBox='0 0 100 100'>
    <defs>
        <mask id='mask-1' x='0' y='0' width='100' height='100'>
            <rect id='main-rect'          x='0' y='0' width='100' height='100' fill='#000' />
            <rect id='main-rect-inverted' x='0' y='100' width='100' height='100' fill='#fff' />

            <text id='text' x='50' y='80'
                  alignment-baseline='middle'
                  text-anchor='middle'
                  font-family='Rammetto One'
                  font-weight='bold'
                  font-size='30'
                  fill='#fff'>SVG</text>

            <rect id='bottom-rect' x='0' y='60' width='100' height='40' fill='#000' />
        </mask>
    </defs>
    <image width='100' height='100' xlink:href='https://picsum.photos/500/500?image=1080' mask='url(#mask-1)' />
</svg>

#preloader {
    display: block;
    width: 100vmin;
    margin: 0 auto;
}
View Compiled
let example = anime.timeline();

example
    .add({
        targets: '#text',
        y: [
            { value: 50, duration: 1000 },
            { value: 50, duration: 1000  },
            { value: 80, duration: 1000 }
        ],
        easing: 'easeOutQuad',
        offset: 500
    })
    .add({
        targets: '#text',
        fill:    '#000',
        easing:  'easeOutQuad',
        offset:  2500
    })
    .add({
        targets: '#main-rect-inverted',
        y:       0,
        easing:  'easeOutQuad',
        offset:  2500
    })
    .add({
        targets:  '#bottom-rect',
        opacity:  0,
        duration: 1,
        offset:   2500
    });
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Rammetto+One

External JavaScript

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