Gradient Grid

_.md

[ Launch: just another inlet to tributary ] 4559596 by roundrobin

config.json

{"description":"Gradient Grid","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.7,"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,"hidepanel":false,"fullscreen":false,"thumbnail":"http://i.imgur.com/fhtUj0O.png"}

inlet.js

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

//<linearGradient id="g420" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
//<stop stop-color="#358FB0" offset="0"/><stop stop-color="#4DE3AC" offset="1"/>
//</linearGradient>
  
var gradient = defs.append('linearGradient')
    .attr('id','g320')
    .attr('gradientUnits','userSpaceOnUse')
    .attr('x1','0%')
    .attr('x2','0%')
    .attr('y1','0%')
    .attr('y2',141)    
    gradient.append('stop')
    	.attr('stop-color','#358FB0')
	    .attr('offset','0')
     gradient.append('stop')
    	.attr('stop-color','#4DE3AC')
	    .attr('offset','1') 

var red = pattern.append('rect')
    .attr('height',100)
    .attr('width',100)
    .attr('fill',"url(#g320)")
      .style("stroke-width", 1)
      .style("stroke", "#002C33") 

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