Pattern grid - raster

_.md

[ Launch: Pattern grid - raster ] 4710427 by zeffii
[ Launch: Pattern grid - raster ] 4659977 by roundrobin
[ Launch: Pattern grid - 2 ] 4659021 by roundrobin
[ Launch: Pattern grid - stripes ] 4657513 by roundrobin
[ Launch: Pattern grid - wave ] 4647105 by roundrobin
[ Launch: Pattern grid - elector ] 4647086 by roundrobin
[ Launch: Pattern grid - elector ] 4647080 by roundrobin
[ Launch: Pattern grid - 50-50 circles ] 4647076 by roundrobin
[ Launch: Pattern grid - double quater circles ] 4647019 by roundrobin
[ Launch: Pattern grid - double quater circles ] 4646988 by roundrobin
[ Launch: Pattern grid - quater circles ] 4646984 by roundrobin
[ Launch: Pattern grid - 70ies circles ] 4646978 by roundrobin
[ Launch: Pattern grid - cross ] 4646975 by roundrobin
[ Launch: Pattern grid - hash ] 4646958 by roundrobin
[ Launch: Pattern grid - hash ] 4646953 by roundrobin
[ Launch: Tributary inlet ] 4646912 by roundrobin

config.json

{"description":"Pattern grid - raster","endpoint":"","display":"svg","public":true,"require":[],"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}

inlet.js

function Path(canvas, path){
  
  this.dataPoints = [];
  
  if(path != undefined){
      this.path = path;
  
  } else {
    
    this.path = canvas.append('svg:path')
    .attr("stroke","#6B6D92")
    .attr("stroke-width",6)
    .attr("fill","none");
  
  }
   
}
Path.prototype.el  = function(wayPoint){
	return this.path;  
}

Path.prototype.add  = function(wayPoint){
  this.dataPoints.push(wayPoint);

}

Path.prototype.render  = function(){
  	
   this.path.attr("d",this.pathWay());
}

Path.prototype.pathWay  = function(){
  var way = '';
  
  for(var i=0; i < this.dataPoints.length; i++){
    var elem = this.dataPoints[i];
    	way += elem.join(' ');
  }
  return way;
} 

var pattern_size = 8;
var strokeSize = 9.77795;


var defs = d3.select('svg').append('defs')
var pattern = defs.append('pattern')
    .attr('id','pattern1')
    .attr('patternTransform','')
    .attr('height',pattern_size)
    .attr('width',pattern_size)
    .attr('patternUnits','userSpaceOnUse')
var attr = {
  'fill':'#B3B6FF',
   'stroke':'#000000',
  'stroke-width':strokeSize,

}

var path = new Path(pattern)
path.add(['M', 0,pattern_size/4.4]);  
path.add(['L',pattern_size/-2.88,pattern_size]);

path.add(['M', pattern_size/23.96,29]);  
path.add(['L',pattern_size,pattern_size/-2.6048]);
path.el().attr(attr).style('stroke-linecap','square');

path.render();

var path = new Path(pattern)
path.add(['M', 23,pattern_size/-.3]);  
path.add(['L',pattern_size/-.36,143]);

path.add(['M', pattern_size/2,pattern_size]);  
path.add(['L',pattern_size,pattern_size/5.84]);

path.el().attr(attr).style('stroke-linecap','square');

path.render();


var path = new Path(pattern)
path.add(['M', pattern_size/3,0]);  
path.add(['L',pattern_size*4.056,pattern_size]);


path.add(['M', -3,pattern_size*-0.112]);  
path.add(['L',pattern_size*0.3,pattern_size]);


path.el().attr(attr)
.style('stroke-linecap','square')
.attr("stroke","#B1B1B1")
path.render();


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