Multiple font

_.md

[ Launch: Pattern grid - raster ] 4734875 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":"Multiple font","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},"test.svg":{"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/7E7tBuD.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 = 5;
var strokeSize = 1.5;


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':'#73A5A5',
  'stroke-width':strokeSize,

}

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

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

path.render();


path.render();

g.append('text')
.text("Lorem Ipsum")
.attr({
	fill: "url(#pattern1)",
	x : 0,
	y: 148,
	"font-size": 98,
	"font-family": "Arial",
	"text-anchor": "start"
});

test.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="Gradient">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="black" stop-opacity="0" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
    </mask>
    
         <linearGradient id="myLinearGradient1"
                      x1="0%" y1="0%"
                      x2="0%" y2="100%"
                      spreadMethod="pad">
        <stop offset="10%" stop-color="#00CC00" stop-opacity="1"/>
        <stop offset="30%" stop-color="#006600" stop-opacity="1"/>

        <stop offset="70%" stop-color="#cc0000" stop-opacity="1"/>
        <stop offset="90%" stop-color="#000099" stop-opacity="1"/>

      </linearGradient>
    
        
         <linearGradient id="myLinearGradient2"
                      x1="0%" y1="100%"
                      x2="0%" y2="0%"
                      spreadMethod="pad">

        <stop offset="20%" stop-color="#cc0000" stop-opacity="1"/>
        <stop offset="100%" stop-color="#000099" stop-opacity="1"/>

      </linearGradient>
    
  </defs>

  <rect x="0" y="0" width="200" height="200" fill="green" />
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
  
  
    
  <text x="0" y="400" style='text-shadow:2px 2px 0px #000000,2px 2px 0px #000000;' stroke-width='5px' stroke='url(#myLinearGradient2)' font-size='200' fill="url(#myLinearGradient1)" >Helllo</text>
  
</svg>