100 random "notes"

_.md

[ Launch: Tributary inlet ] 5904683 by trinary

config.json

{"description":"100 random \"notes\"","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

function segGen(x) {
  var s = x * 10
 return [ "l " + s + ", 0",
  "l " + s + ", " + s,
  "l  0, " + s,
  "l 0 ," + (-s),
  "l " + s + "," + (-s)];
}

function strgen() {
  return segGen(Math.random() + 0.5)[Math.floor(Math.random() * 5)];
}

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

function data() {
  var d = ["M0,0"];
  for(var i = 0; i < 100; i++) {
    d.push(strgen());
  }
  return d.join(' ');
}

line = svg.append("g").attr("transform","translate(40,200)").append("path")
.style({
  stroke: "darkgreen",
  fill: "none",
  "stroke-width": "2px",
  "shape-rendering": "crispEdges"
})

function tick() { 
  line.transition()
    .duration(300)
    .attr("d",data());
}

var interval= setInterval(tick,5000);