JSFiddle - React, Tailwind, and code Playground

by Simon060694

HTML

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

CSS

.arc {
    fill: blue;
}
.p1{
  font-size:18px;
  font-weight:600;
  font-family:sans-serif;
}
.my-div{
  
  position: absolute;
    top: 40%;
    left: 35%;
}
.my-ul{
  font-family: 'Open Sans', sans-serif;
      font-size: 12px;
    width: 100%;
    font-weight: 100;
     animation: pulse 5s ;
      
}
 

@keyframes pulse {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

JavaScript

function ter(callback, t) {
    setTimeout(callback, t)
};
var backColor = '#fff',
fillColor ="#93c7f5";

var vis = d3.select("body").append("svg").style('background',"#fff");
var pi = Math.PI;
vis.attr("width", "400").attr("height", "400") ;
var _r =   149,
    _g = 199,
    _b = 247,
    maxC = 250,
    step= 0.013,
    rStep = (maxC-_r)*step,
    gStep = (maxC-_g)*step,
    bStep = (maxC-_b)*step;

function drawArc (startAngle,endAngle,duration,st,radius, fk){

    var arc = d3.svg.arc()
        .innerRadius(radius)
        .outerRadius(radius+1)
        .startAngle(startAngle);
    //"#93c7f5"//just radians

    var foreground =vis
        .append("path")
        .datum({endAngle:  startAngle,fill: "#93c7f5"  })
        .attr("d", arc)
        .attr("fill", "#93c7f5")
        .attr("transform", "translate(200,200)");


    setTimeout(function() {
        foreground.transition()
            .duration(duration)//1050
            .attrTween("d", arcTween( endAngle, arc, { r:_r,g:_g,b:_b,brighter: true},foreground));
    }, st);//10


}
 
function drawCircles( arg){
    var
        _rad =0,
        
        arc = d3.svg.arc()
            .innerRadius(_rad)
            .outerRadius(_rad+1)
            .startAngle(0)
            .endAngle(2*Math.PI);

    var
        stepAn = 0.01*arg.d,
        _radStep = 0.05,
        
        _x = (center.x +arg.r*Math.cos(arg.a)),
        _y = (center.y +arg.r*Math.sin(arg.a));
   
var circle = vis.append("circle")
                          .attr("cx", _x)
                           .attr("cy", _y)
                         .attr("r", _rad) 
                         .attr("fill", "rgb(255,255,255)");
 var foreground =vis
        .append("path")
        .attr("d", arc)
        .attr("fill", "#000")
        .attr("transform", "translate("+_x+","+_y+")"),
        foreground_1 =vis
        .append("path")
        .attr("fill", "#fff")
        .attr("transform", "translate("+_x+","+_y+")"),
       foregroundEnd ;
       
    var iter...