JSFiddle - React, Tailwind, and code Playground

by yahyaKACEM

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<svg id="main"></svg>

CSS

body {
    background-color: #555;
}

JavaScript

var i = 0,
    svg = d3.select("#main");
    svg.append("circle");
    var circle = svg.select("circle");
    circle.attr("fill", "#777777")
        .attr("cx", function(){ return $(window).width() / 2 })
        .attr("cy", function(){ return $(window).height() / 2 })
setInterval(function(){
    i++;
    circle.attr("r", function(){ return (Math.sin(i/5) + 1)*40; })
        .attr("fill", function(){ var x = (Math.sin(i/5)+1) * 124;
                                  return d3.rgb(x,x,x); });
}, 100);