marching dashes

_.md

[ Launch: Tributary inlet ] 7202825 by trinary

config.json

{"description":"marching dashes","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/v2ayzUt.png"}

inlet.js

// animated dashes

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

var data = [[{x: 20,y: 20},{x:50,y:50},{x:120,y:160},{x:200,y:200}]];
var line = d3.svg.line().interpolate("basis")
	.x(function(d) { return d.x;})
	.y(function(d) { return d.y;});



var lines = svg.selectAll("path").data(data);
lines.enter().append("path").attr("d",line);
lines.attr({
  "fill": "none",
  "stroke-width": 10,
  "stroke": "#000066",
  "stroke-linecap": "round",
  "stroke-dashoffset": 0,
  "stroke-dasharray": "10px 20px"
})

style.css

path {
  -webkit-animation-duration: 0.8s;
  -webkit-animation-name: dash;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 0
  }
  
  to {
    stroke-dashoffset: 30
  }
}