JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js"></script>
<svg id="s" width='100%'></svg>

CSS

body {
    background: #222;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
svg {
    height: 100vh;
}

JavaScript

var size = 3, // Change size


    s = Snap('#s'),
    tny = size * 4,
    sml = size * 8,
    med = sml * 2,
    lrg = med * 2,
    xxl = lrg * 2,


    style = function (size) {
        return s.circle(size, size, size).attr({
            // xxl = 64
            fill: 'hsla(' + (360 / 64 * size) + ',' + 
            (100 / 64 * size) + ',' + (100 / 64 * size) + ',0.6)'
        }).pattern(0, 0, size * 3, size * 3);
    },


    surface = function (size) {
        return s.rect(-4000, -4000, 8000, 8000).attr({
            fill: style(size)
        });
    },


    infRotate = function (surface, size) {
        var pos = size * size / (size / 2);
        surface.transform('r0,' + pos + ',' + pos);
        surface.animate({
            transform: 'r360,' + pos + ',' + pos
        }, xxl * 50, mina.linear, infRotate.bind(this, surface, size));
    };


infRotate(surface(tny), tny);
infRotate(surface(sml), sml);
infRotate(surface(med), med);
infRotate(surface(lrg), lrg);
infRotate(surface(xxl), xxl);