JSFiddle - React, Tailwind, and code Playground

by Ilya Efimoff

HTML

<div id="box" class="svg-container" style="width: 480px; height: 120px; border: 1px solid #C0C0C0;" draggable="true" ondragstart="console.log('box gragged');">
    
</div>

CSS

#dynamic {
  fill-rule: evenodd;
  /*fill-opacity: .7;*/
  stroke: #666;
  stroke-width: 1.5px;
}

.svg-container {
    display: inline-block;
    position: absolute;
    /*width: 100%*/;
    /*padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0;
}

JavaScript

var w = 960,
    h = 240,
    ir = Math.floor(0.35*h),
    or = Math.floor(0.45*h),
    x = d3.scale.ordinal().domain(d3.range(3)).rangePoints([0, w], 2);

var fields = [
  {name: "hours", value: 0, size: 24},
  {name: "minutes", value: 0, size: 60},
  {name: "seconds", value: 0, size: 60}
];

var colors = {
    hours: 120,
    minutes: 240,
    seconds: 303    
};

var arc = d3.svg.arc()
    .innerRadius(ir)
    .outerRadius(or)
    .startAngle(0)
    .endAngle(function(d) { return (d.value / d.size) * 2 * Math.PI; });
var drag = d3.behavior.drag();

var svg = d3.select("#box").append("svg:svg")
                           .attr("preserveAspectRatio", "xMinYMin meet")
                           .attr("viewBox", "0 0 960 240")
                           .attr("draggable", "true")
                           //class to make it responsive
                           .classed("svg-content-responsive", true)
                           //.attr("width", w)
                           //.attr("height", h)
                           .append("svg:g")
                           .attr("transform", "translate(0," + (h / 2) + ")")
                           .attr("id", "group");
d3.select("#group").call(drag);
d3.select("#box").call(drag);

drag.origin(Object).on("drag", function(){
          /*var x = d3.event.x;
          var y = d3.event.y;
          d3.select(this).attr("transform", "translate(" + x + "," + 0 + ")");*/
          console.log("Drag fired on svg");
});

function dyncolor(d){
    return 'hsl('+colors[d.name]+', 50%, '+(50+30*(d.value / d.size))+'%)';
}
function statcolor(d){
    return 'hsl(120, 0%, '+50*(2-d.value/d.size)+'%)';
}

var sdt = 5000; //Time to start, secs.
var dt = sdt;

setInterval(function() {
  dt -= 1;
  dt = dt<0 ? sdt : dt;
  var now = new Date();

  fields[0].previous = fields[0].value; fields[0].value = dt/3600;//now.getHours();
  fields[1].previous = fields[1].value; fields[1].value = (dt%3600)/60;// now.getMinutes();
  fields[2].previous =...