box

_.md

[ Launch: box ] 4ce050ac5248390147fc by enjalot

config.json

{"description":"box","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"icon.html":{"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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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,"ajax-caching":true,"thumbnail":"http://i.imgur.com/zzi5Hn9.png"}

icon.html

<div class="original">
  <svg width=200 height=100>
<defs>
  <g id="layer0">
    <path fill="#515357" stroke="none" d="
    M 21.15 20.6
    Q 22.2 20.1 22 19.85
    L 22 9.8 15.65 9.8 15.65 13.25 11.5 13.25 11.5 9.75 4.95 9.75 4.95 20.55
    Q 11.65 22.85 17.4 21.65 19.9 21.15 21.15 20.6
    M 15.1 4.7
    L 15.1 8.45 21.05 8.45 18.45 4.7 15.1 4.7
    M 11 8.6
    L 12.9 4.85 8.5 4.85 5.95 8.6 11 8.6 Z"/>
  </g>
  
  <g id="layer1">
    <path fill="#515357" stroke="none" d="
    M 10.7 7.4
    L 12.35 3.35 8.5 4.8 5.95 8.55 10.7 7.4
    M 15.5 3.5
    L 16.65 7.25 21.05 8.4 18.45 4.65 15.5 3.5
    M 22 19.85
    L 22 9.8 15.65 9.8 15.65 13.25 11.5 13.25 11.5 9.75 4.95 9.75 4.95 20.55
    Q 11.65 22.85 17.4 21.65 19.9 21.15 21.15 20.6 22.2 20.1 22 19.85 Z"/>
    <path fill="#515357" fill-opacity="0.2" stroke="none" d="
      M 18.75 8.35
      L 18.75 4.9 9.25 4.9 8.8 5 7.6 8.35 18.75 8.35 Z"/>
  </g>
  
  <g id="layer2">
    <path fill="#515357" stroke="none" d="
    M 8.5 4.8
    L 5.95 8.55 9.25 6.45 10.55 2.5 8.5 4.8
    M 18.45 4.65
    L 15.6 2.85 17.8 6.25 21.05 8.4 18.45 4.65
    M 21.15 20.6
    Q 22.2 20.1 22 19.85
    L 22 9.8 15.65 9.8 15.65 13.25 11.5 13.25 11.5 9.75 4.95 9.75 4.95 20.55
    Q 11.65 22.85 17.4 21.65 19.9 21.15 21.15 20.6 Z"/>
    <path fill="#515357" fill-opacity="0.4" stroke="none" d="
    M 18.75 8.35
    L 18.75 4.9 9.25 4.9 8.8 5 7.6 8.35 18.75 8.35 Z"/>
  </g>

  <g id="layer3">
  <path fill="#515357" stroke="none" d="
    M 7.15 3.7
    L 5.05 8.8 6.7 8.2 9.2 4.85 7.15 3.7
    M 21.15 20.6
    Q 22.2 20.1 22 19.85
    L 22 9.8 15.65 9.8 15.65 13.25 11.5 13.25 11.5 9.75 4.95 9.75 4.95 20.55
    Q 11.65 22.85 17.4 21.65 19.9 21.15 21.15 20.6
    M 20.6 8.1
    L 22.65 7.75 18.75 2.85 17.9 4.35 20.6 8.1 Z"/>
    <path fill="#515357" fill-opacity="0.6" stroke="none" d="
    M 18.75 8.35
    L 18.75 4.9 9.25 4.9 8.8 5 7.6 8.35 18.75 8.35 Z"/>
  </g>
  <g id="layer4">
    <path fill="#515357" stroke="none" d="
    M 0.8 5.75
    L 5.6 7.85 7.75 4.25 4.85 1.95 0.8 5.75
    M 21.15 20.6
    Q 22.2 20.1 22 19.85
    L 22 9.8 15.65 9.8 15.65 13.25 11.5 13.25 11.5 9.75 4.95 9.75 4.95 20.55
    Q 11.65 22.85 17.4 21.65 19.9 21.15 21.15 20.6
    M 21.4 7.8
    L 25.05 6.4 20.45 2.15 18.35 4.5 21.4 7.8 Z"/>
    <path fill="#515357" fill-opacity="0.9764705882352941" stroke="none" d="
    M 8.75 4.9
    L 7.55 8.25 18.7 8.25 18.7 4.8 9.2 4.8 8.75 4.9 Z"/>
  </g>
  <g id="animations">
    <!--
  <animate 
    xlink:href="#frame1"
    attributeName="opacity"
    values="0,1;1;1"
    dur="0.5s"
    opacity="remove"
    begin="target.click"
    id="anim1" />


  <animate 
    xlink:href="#frame2"
    attributeName="opacity" 
    values="0,1;1;1"
    dur="0.5s"
    begin="anim1.begin + 0.5s"
    id="anim2" />

  <animate 
    xlink:href="#frame3"
    attributeName="opacity" 
    values="0,1;1;1"
    dur="0.5s"
    begin="anim2.begin + 0.5s"
    opacity="freeze"
    id="anim3" />    

  <animate 
    xlink:href="#frame4"
    attributeName="opacity" 
    values="0,1;1;1"
    dur="0.5s"
    begin="anim3.begin + 0.5s"
    id="anim4" />
    
  <animate 
    xlink:href="#frame5"
    attributeName="opacity" 
    values="0,1;1;1"
    dur="0.5s"
    begin="anim4.begin + 0.5s"
    id="anim5" />
-->
  </g>
  
</defs>
    
<rect id="target" x=100 y=0 width=100 height=100></rect>
<g id="frame1" opacity="0" transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#layer0"/>
</g>
  
<g id="frame2" opacity="0" transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#layer1"/>
</g>  

<g id="frame3" opacity="0" transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#layer2"/>
</g>

<g id="frame4" opacity="0" transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#layer3"/>
</g>
    
<g id="frame5" opacity="0" transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#layer4"/>
</g>
  


        

    

</svg>
</div>

inlet.js

var svg = d3.select("svg");
var animations = svg.select("#animations")
var dur = 0.5

var frames = [1,2,3,4,5]


animations.selectAll("animate").data(frames)
  .enter()
  .append("animate")
  .attr({
    "xlink:xlink:href": function(d) { return "#frame" + d },
    attributeName: "opacity",
    values: "0.1;1;1",
    dur:"0.5s",
    begin: function(d) { 
      if(d == 1) { //first frame
        return "target.click"
      } else {
        return "anim" + (d-1) + ".begin + " + dur + "s";
      }
    },
    id: function(d) { return "anim" + d }
  })

style.css

.original {
  margin-left: 10px;
  margin-top: 20px;
}