JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 200 200">
    <desc>(1)animate要素を用いる</desc>
    <circle cx="50" cy="50" r="20" stroke="black">
        <animate attributeName="fill" begin="0s" dur="5s" from="red" to="yellow" repeatCount="indefinite"/>
    </circle>
    <desc>(2)svgDOM+javascriptを用いる</desc>
    <circle id="j_c" cx="50" cy="100" r="20" stroke="black"/>
    <desc>(3)css3のアニメーション機構（transition，animate）を用いる</desc>
    <style type="text/css">
        #a_c{
            animation: animate_fill 5s infinite;
            -moz-animation: animate_fill 5s infinite;
            -webkit-animation: animate_fill 5s infinite;
            -o-animation: animate_fill 5s infinite;
        } 
        @keyframes animate_fill{
            from {fill: red;}
            to {fill: yellow;}
        }
        @-moz-keyframes animate_fill{
            from {fill: red;}
            to {fill: yellow;}
        }
        @-webkit-keyframes animate_fill{
            from {fill: red;}
            to {fill: yellow;}
        }
        @-o-keyframes animate_fill{
            from {fill: red;}
            to {fill: yellow;}
        }
    </style>
    <circle id="a_c" cx="50" cy="150" r="20" stroke="black"/>
    <text x="75" y="55" font-size="20" stroke="none" fill="black" text-anchor="start">animate要素</text>
    <text x="75" y="105" font-size="20" stroke="none" fill="black" text-anchor="start">javascript</text>
    <text x="75" y="155" font-size="20" stroke="none" fill="black" text-anchor="start">css3</text>
</svg>

JavaScript

function anim(){
		var c = document.getElementById("j_c");
    var fill = "fill";
    var start = new Date();
    setInterval(function(){
        var now = new Date();
        var time = ((now - start)/1000)%5;
        var g = Math.floor(255 * time / 5);
        c.style.setProperty(fill, "rgb(255," + g + ",0)");
    },100);
};

anim();