Power switch 3D

_.md

[ Launch: Tributary inlet ] 8218147 by roundrobin

config.json

{"description":"Power switch 3D","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}},"fullscreen":true,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/cq0VQWV.png"}

inlet.js

var stroke = 'grey'
var stroke_width = 3
   
var defs = d3.select('svg').append('defs')
var pattern = defs.append('pattern')
    .attr('id','pattern1')
    .attr('pattermTransform','')
    .attr('height',100)
    .attr('width',100)
    .attr('patternUnits','userSpaceOnUse')
    
var gradient = defs.append('linearGradient')
    .attr('id','g320')
    .attr('gradientUnits','userSpaceOnUse')
    .attr('x1',0)
    .attr('x2',0)
    .attr('y1',0)
    .attr('y2',173)
    
gradient.append('stop')
  .attr('stop-color',"#00BBFF")
  .attr('offset', 0)

gradient.append('stop')
   .attr('stop-color',"#3A1212")
   .attr('offset',1) 
       

var gradient2 = defs.append('linearGradient')
    .attr('id','g3201')
    .attr('gradientUnits','userSpaceOnUse')
    .attr('x1', 0)
    .attr('x2', 0)
    .attr('y1', 3)
    .attr('y2',179)
    
gradient2.append('stop')
    .attr('stop-color',"#49A7CA")
    .attr('offset',0)

gradient2.append('stop')
	.attr('stop-color',"#153328")
    .attr('offset',1) 
       
       
    
d3.select('svg').append('path')
  	.attr('d','M0,0 L300,0 L300,200 L0,200Z')
  	.attr('stroke',stroke)
  	.attr('stroke-width',stroke_width)
  	.attr('transform','translate(100,100)')
  	.attr('id','left')
    .attr('fill',"url(#g320)")
    .on('click',function(){
    	d3.select('#right')
          .transition()
          .duration(500)
  			.attr('d','M0,0 L300,-20 L300,220 L0,200Z')
        d3.select('#side1')
          .transition()
          .duration(500)
  			.attr('d','M0,-20 L50,-10 L50,210 L0,220Z')
          
        d3.select('#left')
          .transition()
          .duration(500)
  			.attr('d','M0,0 L300,0 L300,200 L0,200Z')
          
       	d3.select('#side0')
          .transition()
          .duration(500)
  			.attr('d','M50,0 L50,0 L50,200 L50,200Z')
          	.attr('stroke','none')
    
    })
  d3.select('svg').append('path')
  	.attr('d','M0,0 L300,-20 L300,220 L0,200Z')
  	.attr('fill','url(#g3201)')
  	.attr('stroke',stroke)
  	.attr('stroke-width',stroke_width)
  	.attr('transform','translate(400,100)')
    .attr('id','right')
    .on('click',function(){
    	d3.select('#right')
          .transition()
          .duration(500)
  			.attr('d','M0,0 L300,0 L300,200 L0,200Z')
          
        d3.select('#side1')
          .transition()
          .duration(500)
  			.attr('d','M0,0 L0,0 L0,200 L0,200Z')
       
        d3.select('#left')
          .transition()
          .duration(500)
 			.attr('d','M0,-20 L300,0 L300,200 L0,220Z')
        
        d3.select('#side0')
          .transition()
          .duration(500)
  			.attr('d','M0,0 L50,-20 L50,220 L0,200Z')
          
    
    })
	  	
 
   d3.select('svg').append('path')
  	.attr('d','M0,-20 L50,-10 L50,210 L0,220Z')
  	.attr('fill','black')
  	.attr('stroke',stroke)
  	.attr('stroke-width',stroke_width)
  	.attr('transform','translate(700,100)')
    .attr('id','side1')
   
     
   d3.select('svg').append('path')
  			.attr('d','M50,0 L50,0 L50,200 L50,200Z')
  	.attr('fill','black')
  	.attr('stroke',"none")
  	.attr('stroke-width',stroke_width)
  	.attr('transform','translate(48,100)')
    .attr('id','side0')   
	
     
d3.select('svg').append('text')
  .text("on")
  .attr('font-size',100)
  .attr('fill','black')
  .attr('transform','translate(180,230)')
  
d3.select('svg').append('text')
  .text("off")
  .attr('font-size',100)
  .attr('fill','black')
  .attr('transform','translate(490,230)')