Skip to content

Instantly share code, notes, and snippets.

@dwtkns

dwtkns/index.html

Created November 16, 2013 18:51
Show Gist options
  • Save dwtkns/7503821 to your computer and use it in GitHub Desktop.
Save dwtkns/7503821 to your computer and use it in GitHub Desktop.
Download ZIP
Umm
Raw
index.html
<!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="http://www.w3.org/2000/svg" xmlns:xlink="http://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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment