<css-doodle grid="10">

    :doodle {

        width: 100vw; height: 100vh;

    }

    position: absolute;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: rgb(@rn(255), @rn(255), @rn(255));

    --time: @rn(12s);

    --time2: @rn(12s);

    --delay1: calc(@index * -0.15s);

    --delay2: calc(@index * -0.15s);

    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>