<css-doodle grid="30">
    :doodle {
        width: 100vw; height: 100vh;
    }
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgb(@r(255), @r(255), @r(255));
    --time: @r(8s);
    --time2: @r(8s);
    --delay1: calc(@index * -0.02s);
    --delay2: calc(@index * -0.02s);
    animation: 
            horizontal var(--time) infinite calc(var(--delay1) * -1) linear alternate,
            vertical var(--time2) infinite calc(var(--delay2) * -1) linear alternate,
            colorX calc(var(--time) * 10) infinite calc(var(--delay1) * -1) steps(10),
            colorY calc(var(--time2) * 7) infinite calc(var(--delay2) * -1) steps(7);
    animation-composition: accumulate;
    @keyframes horizontal {
        from { transform: translateX(0); }
        to { transform: translateX(calc(100vw - 100%)); }
    }
    @keyframes vertical {
        from { transform: translateY(0); }
        to { transform: translateY(calc(100vh - 100%)); }
    }
    @keyframes colorX {
        to {
            filter: hue-rotate(2185deg);
        }
    }
    @keyframes colorY {
        to {
            filter: hue-rotate(1769deg);
        }
    }

</css-doodle>