动画画布中的无限滚动背景

Question

我一直在尝试重新创建this网站的滚动背景，该背景被“遮罩”以仅显示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;