JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

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

CSS

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

JavaScript

var s = Snap('#s');
var grid = [];
var sq = [];

grid[0] = s.rect(0, 0, '100%', '100%');
grid[1] = grid[0].clone();

function style(){
    return {
    fill: 'rgba(160,255,245,0.2)',
    stroke: 'rgba(100,255,245,0.8)',
    strokeWidth: 20,
    strokeDasharray: "10"
    }
}

    sq[0] = s.rect(0, 0, 100, 100).attr(style());
    sq[1] = s.rect(0, 0, 100, 100).attr(style());
    
    var d = sq[0].toPattern(1, 1, 100, 100);
    var e = sq[1].toPattern(1, 1, 50, 50);
    
    grid[0].attr({
        fill: d
    });
    grid[1].attr({
        fill: e
    });


function loop() {
    Snap.animate(0, 400, function (val) {
        d.attr({
            strokeDashoffset: val
        });
        e.attr({
            strokeDashoffset: val
        });
    }, 8000, loop);


}
loop();