JSFiddle - React, Tailwind, and code Playground

by Ehsan Ziya

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<svg id='svg' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="300px" viewBox="0 0 100 300" enable-background="new 0 0 100 300" xml:space="preserve">
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd"...

CSS

#svg {
    visibility: hidden;
}
html,body{
    background-color: red;
}

JavaScript

var w = window.innerWidth;
var h = window.innerHeight;
var svg = document.getElementById('svg');
var pathString = svg.children[0].children[0].getAttribute('d');
var things = [];
var map = function (value, istart, istop, ostart, ostop) {
    return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
};

var paper = Raphael(0, 0, w, h);
var a = paper.path(pathString);
a.attr('fill', 'white');
a.attr('stroke', 'black');
a.translate(w / 2 - 150, h / 2 - 150);
a.scale(0.7339360936839422, 0.7339360936839422);
a.hide();
//a.rotate(1.3);

things.push(a);

for (var i = 1; i < 29; i++) {
    var one = paper.path(pathString);
    one.attr('fill', 'black');
    one.attr('stroke', 'white');
    one.translate(w / 2 - 150, h / 2 - 150);
    var scaledI = map(i, 1, 200, 0.2, 10);
    one.scale(Math.exp(scaledI) * 0.27, Math.exp(scaledI) * 0.27);
    one.insertBefore(things[i - 1]);
    if (i > 2) {
        one.translate(1,0);
        one.hover(function () {
            this.attr('fill', 'white');
        }, function () {
            this.attr('fill', 'black');
        });
    }

    things.push(one);
}

things[1].hover(function () {
    things.forEach(function (thing, index) {
        if (index < 1) return;
        thing.attr('fill', 'white');
        thing.attr('stroke', 'black');
    });
}, function () {
    things.forEach(function (thing, index) {
        if (index < 1) return;
        thing.attr('fill', 'black');
        thing.attr('stroke', 'white');
    });
});