Snap.svg Animation Tests #1

Paths exported from Illustrator; animated with http://snapsvg.io/

Made after I saw the thingy at the bottom of http://www.microsoft.com/en-us/news/stories/cybercrime/index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path { fill:none; stroke:white; }

.bg { fill: #446;}
.inner { 
  stroke-width: 38px; 
  stroke: #ffc; 
  opacity: .1;}
#inner2 { 
  stroke-width:20px;
}
.mid { 
  stroke-width: 3px; 
  stroke: #ccf; 
  opacity: .2;}
.outer { 
  stroke-width: 1.5px; 
  stroke: #fff; 
  stroke-linecap: round; 
  opacity:.3;}
</style>
<body>

var paper = Snap('#svg');

var f = paper.filter(Snap.filter.blur(3, 3));

var inner = paper.selectAll(".inner"),
    mid   = paper.selectAll('.mid')
    outer = paper.selectAll(".outer");

inner.forEach(function(el,i) {
  el
  .attr('stroke-dasharray', Math.random()*30+',50,'+Math.random()*20+',10,5')
  
  if (!i) el.attr({ filter: f })

conveyor(el,Math.random()*1);
});

mid.forEach(function(el,i) {
  el.attr('stroke-dasharray', 20+','+Math.random()*50+',20,10,5,5,5');
  
  // -i is just to reverse one of the paths
  // bc illustrator exported one of the stroke paths flip-flopped from the other
  // in terms of direction
  
  conveyor(el,Math.random()*4,-i);
})

outer.forEach(function(el,i) {
  el.attr('stroke-dasharray', '.1 , 5')
  conveyor(el,Math.random()*1,-i);
})

//speed in path-lengths per minute
function conveyor(el,speed,reversed) {
  var speed    = speed    || 1,
      reversed = reversed || 0;

var len = reversed ? -el.getTotalLength() : el.getTotalLength(),
      dur = 60000/speed;

el.attr('stroke-dashoffset',0);

el.animate({ 'stroke-dashoffset': len }, dur );

setTimeout(function() { conveyor(el, reversed); }, dur);
}

</script>

Modified http://snapsvg.io/assets/js/snap.svg-min.js to a secure url

https://snapsvg.io/assets/js/snap.svg-min.js