<button class="start">Start Animation</button>

<svg>
  <rect x="200" y="100" width="200" height="200" fill="white" stroke="black"/>
  <rect x="225" y="125" width="150" height="150" fill="white" stroke="black"/>
  <rect x="250" y="150" width="100" height="100" fill="white" stroke="black"/>
  <rect x="275" y="175" width="50" height="50" fill="white" stroke="black"/>
</svg>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
  width: 600px;
}

svg {
  display: block;
  width: 100%;
  height: 350px;
}

button {
  background: wheat;
  border: 1px solid black;
  font-family: 'Lato';
  border-radius: 5px;
  padding: 8px;
  margin: 20px 0;
  outline: none;
  cursor: pointer;
}
var startButton = document.querySelector(".start");

var strokeAnimation = KUTE.allFromTo(
  "rect",
  {
    attr: { strokeWidth: 1}
  },
  {
    attr: { strokeWidth: 5 }
  },
  {
    offset: 1000,
    easing: 'easingCubicIn'
  }
);

var fillAnimation = KUTE.allTo(
  "rect",
  {
    attr: { fill: 'red', stroke: 'white' }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicIn'
  }
);

strokeAnimation.chain(fillAnimation);

startButton.addEventListener(
  "click",
  function() {
    strokeAnimation.start();
  },
  false
);

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300,900

External JavaScript

  1. https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js
  2. https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js
  3. https://cdn.jsdelivr.net/kute.js/1.6.2/kute-attr.min.js