Text animations

_.md

[ Launch Inlet ]
Gist #4073890
Gist #4070587
Gist #4070491
Gist #4070483
Gist #4069759
Gist #4069695
Gist #4069688
Gist #4069685
Gist #4069431
Gist #4069428
Gist #4069409
Gist #4069372
Gist #4069367
Gist #4069364
Gist #4069343
Gist #4004046

config.json

{"description":"Text animations","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"walking.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.6452181993506053,"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

console.log(d3.select("#bild"))
 
d3.select("#bild")
  .attr("x",-200)
  .transition()
  .duration(1200)
  .attr("x",-100)
  .attr("y",100);   


  
d3.select("#animated-rect")
	.attr("width",0)
	.transition()
  	.duration(1000)
  		.attr("width",10)
  	.transition()
  	.duration(428)
    	.attr("x",200)
  		.attr("width",500)       
	    .attr("fill","#0083DB") 
       
                	  
       
  d3.select("#animated-rect2")
  	.transition()
  	.duration(1000)
    	.attr("x",200)
        .attr("y",800)
  		.attr("height",100)         
	    .attr("fill","#020002") 
    
              

d3.select("defs").append("clipPath")
  .attr("id","gg")
  .append("text")
  .attr("font-size",100)
  .attr("x",100)
  .attr("y",100)  
  .text("HELLO WORLD")
  
         
  
d3.select("svg")
  .append("path")
  	.attr("d","M0,0 L50,0 L100,100 L50,100")
    .attr("fill","#9AC49A")
  	.attr("transform","translate(0,100)")
  	.attr("clip-path","url(#gg)")
  .transition()
  .duration(1500)
	.attr("d","M0,0 L800,0 L850,100 L50,100");

         
 

             
//<clipPath id="clip5">
//	<text font-size=100 y=878 x=250 id="schablone">WORLD</text>
//</clipPath>
             



  		
      
  	          
           

walking.svg