Анимация бесконечной прокрутки фона на холсте

Question

Я пытался воссоздать фон прокрутки этого сайта, который "замаскирован", чтобы показывать только цифры 1.1.1.1.

Я понимаю, что они применяют XOR globalCompositeOperation на холсте, который содержит 2 изображения (фон и маска 1.1.1.1). Однако я немного не уверен в том, как им удалось заставить фон бесконечно прокручиваться.

Я бы предположил, что он находится под функцией requestAnimationFrame(), но я не уверен в том, что он делает.

В настоящее время холст отлично рендерится, просто застрял на анимации:

import React, {Component} from 'react';
import logo from "../../../src/dummy1.png"
import maskImage from "../../../src/mask500.png"
import './CanvasLogo.css'

export class CanvasLogo extends Component{

    state = {
        image: null,
    }

    constructor(props) {
        super(props);
        this.canvasRef = React.createRef();
        this.imageRef = React.createRef();
        this.imageMaskRef = React.createRef();
    }
    componentDidMount() {
        this.loadImage()
    }

    loadImage() {
        let ctx = this.canvasRef.current.getContext('2d');
        const img = new Image();
        const maskImg = new Image();
        img.src = logo
        maskImg.src = maskImage
        img.onload = () => {
            ctx.globalCompositeOperation = "xor"
            ctx.drawImage(img, 0, 0);
            ctx.drawImage(maskImg, 0, 0);

        }

    }

    render() {
        return (
            <div className="canvasLogo">
                <div>Canvas</div>
                <canvas ref={this.canvasRef} className="landing" width={500} height={500} />
                <img ref={this.imageRef} src={logo} id="dummy" className="hidden" alt=""/>
                <img ref={this.imageMaskRef} src={maskImage} className="hidden" alt=""/>
            </div>
        )
    }
}

export default CanvasLogo;