PathLib & Pattern

_.md

[ Launch: Variable Stroke width ] 4735469 by roundrobin
[ Launch: SVG Path Test 1 ] 4721138 by roundrobin
[ Launch: SVG Path Element ] 4721053 by roundrobin
[ Launch: Bootstrap Trib ] 4711978 by roundrobin
[ Launch: Tributary inlet ] 4711690 by roundrobin

config.json

{"description":"PathLib & Pattern","endpoint":"","display":"svg","public":true,"require":[{"name":"Helpers","url":"https://raw.github.com/roundrobin/svg-path-generator/master/svg-path-generator.js"}],"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}},"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,"fullscreen":false,"thumbnail":"http://i.imgur.com/WKnKJtZ.png"}

inlet.js

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

var defs = d3.select('svg').append('defs')
var pattern = defs.append('pattern')
    .attr('id','pattern1')
    .attr('pattermTransform','')
    .attr('height',pattern_size)
    .attr('width',pattern_size)
    .attr('patternUnits','userSpaceOnUse')

   
function r(min, max) {
    return Math.random() * (max - min) + min;
}


//Uses the svg-path-generator class
//https://github.com/roundrobin/svg-path-generator


var x=0,y=0;
for(var i=0; i < 24;i++){
  var path = new Path(pattern)
	path.add(['m',x,y]);

  
  path.el().attr({'stroke-width':i/2})
  path.add(['M',x,y]);
  x = r(-2,pattern_size);
  y = r(0,pattern_size);
  
  path.add(['L',x,y]);
  path.render();	
}	 

path.render();
path.showPoints()

path.hidePoints()
path.hidePoints()
console.log(path.el().node().pathSegList) 


d3.select('svg').append('rect')
        .attr('height',tributary.sh)
      .attr('width',tributary.sw)
  	  .attr('fill','url(#pattern1)')