math clock

_.md

[ Launch: math clock ] 6e47f69f89e02ae18ee4 by omniwired

config.json

{"description":"math clock","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true}

inlet.js

var svg = d3.select('svg');

var arc = d3.svg.arc().innerRadius(134).outerRadius(128)
.startAngle(0).endAngle(Math.PI);

var arcend = d3.svg.arc().innerRadius(133).outerRadius(-149)
.startAngle(10).endAngle(15);

var color = d3.scale.linear()
  .range(['#5bb5ff', 'hsl(356,100%,67%)'])

var id = setInterval(function() {
  
  var d = new Date();
  var n = d.getSeconds();

  for(var i=0; i<12; i++) {
  
    svg.append('path')
     .attr('d',  d3.svg.arc().innerRadius(18.7*i).outerRadius(17.7*i)
    .startAngle(n/Math.PI*1/3).endAngle(0))
    .attr({
      transform: 'translate (582, 435) rotate(357, 28, -43)',
      fill: function() {
        return color(Math.random());
      }
    }).transition().delay(1000)
    .attr({
      
    }).remove()
    
  
  }
 svg.append('text')
 .attr({
   transform: 'translate (247, 192) rotate(357, 28, -43)',
 })
 .text(n).transition().delay(1000)
    .attr({
      
    }).remove()

  
}, 1000)

//clearInterval(id);