Old school D3 from simpler times

All examples By author By category About

dwtkns

Full window Github gist

Umm

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

path { fill:none; stroke:white; }

.bg { fill: #446;}
.inner { stroke-width: 500px; stroke: #ffc; opacity: .2;}
.dark { stroke: #114; opacity:.2;}
</style>
<body>

<svg id="svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="500px" viewBox="0 0 960 500" enable-background="new 0 0 960 500" xml:space="preserve">
  <rect class="bg" id="bg" x="0" y="0" width="960" height="500"/>
  <path class="inner" id="inner1" d="M425,260v165c0,110-90,200-200,200l0,0c-110,0-200-90-200-200l0,0c0-110,90-200,200-200h300c55,0,100-45,100-100l0,0c0-55-45-100-100-100l0,0c-55,0-100,45-100,100v65"/>
  <path class="inner" id="inner2" d="M425,260v165c0,110-90,200-200,200l0,0c-110,0-200-90-200-200l0,0c0-110,90-200,200-200h300c55,0,100-45,100-100l0,0c0-55-45-100-100-100l0,0c-55,0-100,45-100,100v65"/>
  <path class="inner" id="inner3" d="M425,260v165c0,110-90,200-200,200l0,0c-110,0-200-90-200-200l0,0c0-110,90-200,200-200h300c55,0,100-45,100-100l0,0c0-55-45-100-100-100l0,0c-55,0-100,45-100,100v65"/>
  <path class="inner" id="inner4" d="M425,260v165c0,110-90,200-200,200l0,0c-110,0-200-90-200-200l0,0c0-110,90-200,200-200h300c55,0,100-45,100-100l0,0c0-55-45-100-100-100l0,0c-55,0-100,45-100,100v65"/>
  <path class="inner dark" id="inner5" d="M425,260v165c0,110-90,200-200,200l0,0c-110,0-200-90-200-200l0,0c0-110,90-200,200-200h300c55,0,100-45,100-100l0,0c0-55-45-100-100-100l0,0c-55,0-100,45-100,100v65"/>
  <path class="inner dark" id="inner6" d="M425,260v165c0,110-90,200-200,200l0,0c-110,0-200-90-200-200l0,0c0-110,90-200,200-200h300c55,0,100-45,100-100l0,0c0-55-45-100-100-100l0,0c-55,0-100,45-100,100v65"/>
  <path class="inner dark" id="inner7" d="M425,260v165c0,110-90,200-200,200l0,0c-110,0-200-90-200-200l0,0c0-110,90-200,200-200h300c55,0,100-45,100-100l0,0c0-55-45-100-100-100l0,0c-55,0-100,45-100,100v65"/>
</svg>

<script src="https://snapsvg.io/assets/js/snap.svg-min.js"></script>
<script>

var paper = Snap('#svg');

var inner = paper.selectAll(".inner");

inner.forEach(function(el) {
  el.attr('stroke-dasharray', Math.random()*15+','+Math.random()*50+','+Math.random()*50)

conveyor(el,Math.random()*.5);
  wat(el,Math.random()*10)
});

//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();
  console.log(speed)
  var dur = 60000/speed;

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

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

function wat(el,speed) {
  var dur = 60000/speed;

var wid = (Math.random()*3000)+200;
  el.animate({ 'stroke-width':  wid }, dur );

setTimeout(function() { wat(el,speed); }, 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