Pattern grid - dot mix

_.md

[ Launch: Pattern grid - 2 ] 4657687 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 - dot mix","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,"fullscreen":false,"thumbnail":"http://i.imgur.com/dqVsmcO.png"}

inlet.js

function Path(canvas, path){
  
  this.dataPoints = [];
  
  if(path != undefined){
      this.path = path;
  
  } else {
    
    this.path = canvas.append('svg:path')
    .attr("stroke","black")
    .attr("stroke-width",3)
    .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 = 62;
var strokeSize = 19;

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':'none',
   'stroke':'#1A8080',
  'stroke-width':strokeSize
}

var path = new Path(pattern)
path.add(['M',0,pattern_size/2]);  
path.add(['L',pattern_size/2,pattern_size]);
path.el().attr(attr)
path.render();

var path = new Path(pattern)
path.add(['M',pattern_size/2,0]);  
path.add(['L',pattern_size,pattern_size/2]);
path.el().attr(attr)
path.render();

pattern.append("svg:circle")
    .attr("r",3)
    .attr("cx",pattern_size/2)
    .attr("cy",pattern_size/2)
    .attr("fill","#0F1142");




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