<button class="start">Start Morphing</button>
<svg id="morph-example" xmlns="http://www.w3.org/2000/svg">
    <path id="battery-a" fill="none" stroke="black" stroke-width="2" d="M50,10 l150,0 l0,25 l20,0 l0,50 l-20,0 l0,25 l-150,0 l0,-100z"/>
    <path id="bookmark-a" fill="none"  stroke="black" stroke-width="2" d="M70,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z"/>
  
  <path id="battery-b" fill="none" stroke="black" stroke-width="2" d="M310,10 l150,0 l0,25 l20,0 l0,50 l-20,0 l0,25 l-150,0 l0,-100z"/>
    <path id="bookmark-b" fill="none"  stroke="black" stroke-width="2" d="M330,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z"/>
</svg>

body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
  width: 560px;
}

#bookmark-a, #bookmark-b {
  display: none;
}

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

button {
  background: wheat;
  border: 1px solid black;
  font-family: 'Lato';
  border-radius: 5px;
  padding: 8px;
  margin: 20px 0;
  outline: none;
  cursor: pointer;
}

var heading = document.querySelector("h1");
var startButton = document.querySelector(".start");

var morphA = KUTE.to("#battery-a", { path: "#bookmark-a" }, { duration: 5000 });

var morphB = KUTE.to(
  "#battery-b",
  { path: "#bookmark-b" },
  { duration: 5000, reverseFirstPath: true }
);

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