JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<svg width="500" height="500">
    <g>
        <g class="">
            <circle r="25" cx="50" cy="50" />
        </g>
        <g class="G1">
            <circle class="C1" r="25" cx="150" cy="50" />
        </g>
        <g class="">
            <circle class="C2" r="25" cx="250" cy="50" />
        </g>
        <g class="G2">
            <circle r="25" cx="350" cy="50" />
        </g>
        <g >
            <circle class="C3" r="25" cx="450" cy="50" />
        </g>
    </g>
</svg>

CSS

circle {
    stroke: black;
    fill: red;
    stroke-width: 1px;
    animation: stroke2 2s linear 0s 1 normal both paused;
}
.planet circle {
    animation: stroke2 2s linear 0s 1 reverse both;
}
.related circle {
    animation: stroke2 2s linear 0s 1 normal both;
}
@keyframes stroke2 {
    from {
        stroke-width: 1;
        fill: #ff0000;
    }
    to {
        stroke-width: 10;
        fill: #0000ff;
    }
}
/* Demonstrate that fill works correctly */
 @keyframes stroke {
    0% {
        stroke-width: 1;
    }
    25% {
        stroke-width: 3;
    }
    50% {
        stroke-width: 5;
    }
    75% {
        stroke-width: 7;
    }
    100% {
        stroke-width: 10;
    }
}
/* Demonstrate that fill works correctly */
 @keyframes fill {
    0% {
        fill: #FF0000;
    }
    25% {
        fill: #BB0033;
    }
    50% {
        fill: #990066;
    }
    75% {
        fill: #4400aa;
    }
    100% {
        fill: #0000ff;
    }
}

JavaScript

setInterval(function () {

        var svg = d3.select("svg");
        svg.selectAll("g").attr("class", "related");

        setTimeout(function () {
            svg.selectAll("g").attr("class", "planet");
        }, 3000);
}, 6000);