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

<defs>


<clipPath id="clip0" clipPathUnits="objectBoundingBox">
<circle r="0.2" cx="0.2" cy="0.2" />
</clipPath>


<clipPath id="clip2">
	<text font-size="120" y="120px">WORLD</text>
</clipPath>


<clipPath id="clip2">
	<text font-size="120" y="120px">WORLD</text>
</clipPath>


<clipPath id="clip3">
	<text font-size=184 y=365 id="schablone12" font-weight='bold'>WORLD</text>
</clipPath>
    
      
<clipPath id="clip4">
	<text font-size=100 y=690 x=250 id="schablone">WORLD</text>
</clipPath>
       
<clipPath id="clip5">
	<text font-size=100 y=878 x=250 id="schablone">WORLD</text>
</clipPath>
             
              

</defs>

<rect width="1000px" height="1000px" y="0" fill="#8082A8"></rect>	
<!-- <image xlink:href="map.png" x='0' clip-path="url(#clip0)" width="200px"  height="200px" transform="translate(200,200)"> </image> -->
<rect height="120px" width="500px" fill="#0dadd6" x="0px" y="0px" clip-path="url(#clip2)"></rect>

<image xlink:href="http://thumbnails.visually.netdna-cdn.com/smart-grid-where-power-is-going_50a2bc2226158_w587.jpg" 
  x=-200 y=-100 id="bild" clip-path="url(#clip3)" width=1021  height=665 transform="translate(0,0)"> </image> 
    
     
<rect width="500px" height="100px" x="450" y="600" clip-path="url(#clip4)" fill="#131AA0" id="animated-rect" ></rect>	
  
  
<rect width="500px" height="0px" x="200" y="850" clip-path="url(#clip5)" fill="#131AA0" id="animated-rect2" ></rect>