indecks logo animation

dabblet.css

/**
 * indecks logo animation
 */

background: #fff;

dabblet.html

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10%"
   viewBox="0 0 132.3 138.3" preserveAspectRatio="xMidYMid meet">
   <style type="text/css">
    @-webkit-keyframes wobble {
      from {
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
      }
      to {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }     
    }
    @keyframes wobble {
      from {
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
      }
      to {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }     
    }
    polygon {
      -webkit-transform-origin: center;
      -webkit-animation: wobble 1s ease infinite alternate;
      -webkit-transform: scaleY(0.7);
      transform-origin: center;
      animation: wobble 1s ease infinite alternate;      
      transform: scaleY(0.7);
    }
    polygon:nth-child(1) {            
      fill: #008995;  
    }
    polygon:nth-child(2) {      
      fill: #009DA5;
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;  
    }     
    polygon:nth-child(3) {      
      fill: #00B2B1;      
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }    
   </style>
<g>
  <polygon points="57.1,101.1 36.5,108.5 36.5,35.6 57.1,41.9"/>
  <polygon points="76.8,107.1 56.6,118 56.6,22.3 76.8,33.2"/>
  <polygon points="95.9,111.2 76,129 76,9.4 95.9,26.2"/>
</g>
</svg>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}