Explain Typography

_.md

[ Launch Inlet ]
Gist #2900228

config.json

{"description":"Explain Typography","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}},"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}

inlet.js

var started = false
var draw = true    
var path;    
  d3.select('svg')
    .attr("pointer-events", "all")
    .on('double-click',function(){
    	console.log('Hee')
    }) 
    .on('click',function(){
      var p = d3.mouse(this)	
      if(started){
          var line = d3.select('.letter').attr('d')
          path.attr('d',line+'L '+p[0]+' '+p[1])    
      }else{
          
            if(draw){
              started = true
               
          circle = g.append('circle')
            .attr('r',5)
           .attr('cx',p[0])
            .attr('cy',p[1])
            .on('mouseover',function(){
            	d3.select(this).attr('fill','#ff0000')
            })
            .on('mouseout',function(){
            	d3.select(this).attr('fill',"#000000")
            })
            .on('click',function(){
              if(started){
					var line = d3.select('.letter').attr('d')
             		path.attr('d',line+'Z')    
                    started = false
                    draw = false  
              }  
            }) 
            draw = false
      		}
          path = g.append('path')
            .attr('class','letter')
            .attr('fill','none')
            .attr('stroke','black')
            .attr('stroke-width','3')
            .attr('d','M '+p[0]+' '+p[1])
        
      } 
      
  })  

    var x=327
    var skewX = -23     
g.append('line')
  .attr('stroke-width',26)  
  .style('stroke','black')
   .style('fill',"none")
  .attr('x1',x+3)
  .attr('x2',x)
  .attr('y1',34)
  .attr('y2',382)
  .attr('opacity',0.6)
  .attr('transform','skewX('+skewX+')')

 circle = g.append('circle')
           .attr('r',57)
           .attr('cx',331)
		   .attr('cy',61)  
           .attr('stroke-width',5)  
           .style('stroke','black')
           .style('fill',"none")
   
  
 g.append('path')
  .attr('stroke-width',53)  
  .style('stroke','black')
   .style('fill',"none")
  .attr('d','M '+351+','+42+' q '+(-116)+','+(72)+' '+-200+','+343+'')
  .attr('opacity',0.6)
  .attr('stroke-linecap','round')
  .attr('transform','skewX('+45+')') 
  
g.append('text')
  .attr('font-size',500)  
  .style('opacity',0.368)
    .style('fill',"#2944B1")
  .attr('dominat-baseline','hanging')
  .attr('x',169)
  .attr('y',381)
  .text('A')
  
 g.append('text')
  .attr('font-size',29)  
  .style('opacity',0.168)
    .style('fill',"#2944B1")
  .attr('dominat-baseline','hanging')
  .attr('x',169)
  .attr('y',505)
  .text('ABCDEFGHIJKLOMNOPRSTUVWXYZ')
 
g.append('text')
  .attr('font-size',29)  
  .style('opacity',0.168)
    .style('fill',"#2944B1")
  .attr('dominat-baseline','hanging')
  .attr('x',169)
  .attr('y',538)
  .text('abcdefghijklmnopqrstuvwxyz')