Triangle clock

Every second, draws a black triangle made of the coordinates on the clock of the current second, minute and hour. Previous triangles are displayed in white.

After one hour, all trinagles are deleted.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    svg {
      background-color: #bdbdbd;
      width: 500px;
      height: 500px;
    }
    circle {
      fill: #f0f0f0;
    }
    path {
        fill: none;
        stroke: black;
        stroke-width: 1.5;
    }
    path.old {
        stroke: white;
        stroke-width: 0.5;
    }
  </style>
</head>
<body>
<svg></svg>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script type="text/javascript">
  var svg = d3.select("svg")

// Create the clock
  var items = 60;
  var x0 = 250;
  var y0 = 250;
  var r = 240

for(var i = 0; i < items; i++) {
    var x = x0 + r * Math.cos(2 * Math.PI * i / items);
    var y = y0 + r * Math.sin(2 * Math.PI * i / items);

if (i < 45) {
        var id = i + 15
    } else {
        var id = i % 45
    }

var circle = svg.append("circle")
        .attr("cx", x)
        .attr("cy", y)
        .attr("id", "c_" + id)
        .attr("r", 1)
  }

var lineGenerator = d3.line();

var i = 1;
  var t = d3.interval(function(elapsed) {

d3.selectAll('path')
      .classed('old', true)

// Check the current time
    var current_time = new Date()

// Get the current second, minute, hour
    var second = d3.select("circle#c_" + current_time.getSeconds())
    var minute = d3.select("circle#c_" + current_time.getMinutes())
    var hour = d3.select("circle#c_" + current_time.getHours() %12 * 5)

var coordinates = [
                  [second.attr('cx'), second.attr('cy')],
                  [minute.attr('cx'), minute.attr('cy')],
                  [hour.attr('cx'), hour.attr('cy')],
                  [second.attr('cx'), second.attr('cy')]
                 ]
    var path_current_time = lineGenerator(coordinates);
    d3.select('svg')
      .append('path')
      .attr('d', path_current_time);

i = i + 1
    // Remove all paths after one hour
    if (i == 3601) {
        d3.selectAll('path').remove()
        i = 1
    }
  }, 1000); // Every second
</script>
</html>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-timer.v1.min.js