Animated background pattern with sass on whole body

I'm wondering if there is a way to make sort of an animated background pattern just with sass. So far I'm looping through svgs and I give them some subtle movement:

@for $i from 1 through 8 {
    $top: percentage(random(80)/100);
    $left: percentage(random(80)/100);
    $rotation: random(360);
    $speed: 10 + random(10);
    $x-random-start: 50 + random(20);
    $x-random-end: 100 + random(20);
    $y-random-start: 50 + random(20);
    $y-random-end: 100 + random(20);

    @keyframes squares-#{$i} {
        0% {
            transform: translate($x-random-start + px, $y-random-start +     px) rotate(#{$rotation + 0}deg);
        }
        100% {
            transform: translate($x-random-end + px, $y-random-end + px) rotate(#{$rotation + 360}deg);
        } 
    }

    .squares-#{$i} {
        width: 2em;
        height: 2em;
        top: $top;
        left: $left;
        position: absolute;
        z-index: -3;
        animation: squares-#{$i} #{$speed}s linear alternate infinite;
    } 
}

What I would like to do is to spread the svgs across whole body with spacing between them within some small, random range. I would really appreciate some help with this. Cheers!