<div class="maskSvg2Container">
    <div class="maskSvg2">
        <svg viewBox="0 0 10 10" stroke="currentColor" stroke-width="1">
            <rect y="-1" width="10" height="10" class="perfHack" fill="none" stroke-width="0" />
            <g class="rail" fill="none">
                <polyline points="32.5,3.75 35,1.25 65,1.25 67.5,3.75" />
                <polyline points="32.5,6.25 35,8.75 65,8.75 67.5,6.25" />
                <polyline points="0,3.75 80,3.75 82.5,6.25 92,6.25 94.5,3.75" />
                <polyline points="10.5,3.75 13,6.25 80,6.25 82.5,3.75 105,3.75" />
                <polyline points="50,8.75 52.5,6.25" />
                <polyline points="45,3.75 47.5,6.25" />
                <polyline points="60,6.25 62.5,3.75" />
            </g>
        </svg>
    </div>
</div>

body {
    background: linear-gradient(skyblue, wheat);
    color: #342;
    margin: 0;
}

.maskSvg2Container {
    align-items: stretch;
    aspect-ratio: 1 / 1;
    contain: content;
    display: flex;
    justify-content: stretch;
    margin: auto;
    max-height: 100vh;
    max-height: 100dvh;
    max-width: 100%;
    position: relative;
    transform: translateX(0);
}

.maskSvg2 {
    background-image: radial-gradient(
        circle at 50%,
        currentColor 10%,
        transparent calc(10% + 1px)
    );
    box-sizing: content-box;
    --dot-mask: radial-gradient(circle at 50%, transparent 4.5%, white calc(4.5% + 1px));
    animation: mask-position-2 8s infinite linear;
    aspect-ratio: 1 / 1;
    flex: auto;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    -webkit-mask-image: var(--dot-mask);
    mask-image: var(--dot-mask);
    margin: -50% 0;
    padding: 50% 0;
    will-change: transform;
}

.maskSvg2 > svg {
    animation: mask-position-2-reverse 8s infinite linear;
    width: 100%;
    will-change: transform;
}

.rail {
    animation: rail-position 8s infinite linear;
    transform: translateX(-55%);
}

.perfHack {
    animation: mask-position-2 8s infinite linear;
}

@keyframes rail-position {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-950%);
    }
}

@keyframes mask-position-2 {
    0%,
    5.79%,
    60.53%,
    78.95%,
    94.12%,
    100% {
        transform: translateY(-6.25%);
    }
    8.42%,
    28.9%,
    50%,
    57.89%,
    81.58%,
    91.58% {
        transform: translateY(6.25%);
    }
    31.58%,
    47.37% {
        transform: translateY(18.75%);
    }
}

@keyframes mask-position-2-reverse {
    0%,
    5.79%,
    60.53%,
    78.95%,
    94.12%,
    100% {
        transform: translateY(12.5%);
    }
    8.42%,
    28.9%,
    50%,
    57.89%,
    81.58%,
    91.58% {
        transform: translateY(-12.5%);
    }
    31.58%,
    47.37% {
        transform: translateY(-37.5%);
    }
}

/* The animation still flickers on my Android phone... */