fontTest 2

_.md

[ Launch: Pattern grid - snake ] 4671769 by roundrobin
[ Launch: Pattern grid - 70ies circles ] 4653560 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":"fontTest 2","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

var pattern_size = 3;

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')




var r = pattern_size/2;
pattern.append("svg:circle")
        .attr("r",r)
        .attr("cx",0)
        .attr("cy",0)
        .attr("fill","#29529C");

pattern.append("svg:circle")
        .attr("r",r)
        .attr("cx",pattern_size)
        .attr("cy",pattern_size)
        .attr("fill","#29529C");


var pattern2 = defs.append('pattern')
    .attr('id','pattern2')
    .attr('pattermTransform','')
    .attr('height',pattern_size)
    .attr('width',pattern_size)
    .attr('patternUnits','userSpaceOnUse')

var pattern_size = 5;
pattern2.append("svg:circle")
        .attr("r",r)
        .attr("cx",0)
        .attr("cy",0)
        .attr("fill","#29529C");

pattern2.append("svg:circle")
        .attr("r",r)
        .attr("cx",pattern_size)
        .attr("cy",pattern_size)
        .attr("fill","#29529C");

 
fontSize = 123
var arr = ['hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello','hello']

function makeid()
{
    var text = "";
    var possible = "Babcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 6 ; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}  
    
d3.select('svg').append('text')
        .attr('y',140)
        .attr('font-size',fontSize)
      .text('@BausOf')
  	  .attr('fill','url(#pattern1)')
  	  .attr('stroke-width',20)
  	  .attr('stroke','url(#pattern2)')
	  .transition()
	  .duration(2000)
.tween("text", function() {
  return function(t) {
    this.textContent = makeid();
  }; 
})
.each('end',function(){
	d3.select(this).text('BausOf')
})
;

d3.select('svg').append('text')
        .attr('y',263)
        .attr('font-size',fontSize)
      .text('OfTheNauf')
  	  .attr('fill','url(#pattern1)')
  	  .attr('stroke-width',20)
  	  .attr('stroke','url(#pattern2)')