<button class="start">Start Morphing</button>
<svg 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
             M70,30 l60,65 l-10,-65 l60,65z"/>
    <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
             M80,80 l30,-45 l30,45 l0,0z"/>
    
    <path id="battery-b1" fill="none" stroke="black" stroke-width="2" 
          d="M250,10 l150,0 l0,25 l20,0 l0,50 l-20,0 l0,25 l-150,0 l0,-100z"/>
    <path id="battery-b2" fill="none" stroke="black" stroke-width="2" 
          d="M270,30 l60,65 l-10,-65 l60,65z"/>
    <path id="bookmark-b1" fill="none"  stroke="black" stroke-width="2" 
          d="M270,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z"/>
    <path id="bookmark-b2" fill="none"  stroke="black" stroke-width="2" 
          d="M280,80 l30,-45 l30,45 l0,0z"/>
</svg>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
  width: 500px;
}

#bookmark-a, #bookmark-b1, #bookmark-b2 {
 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 morphB1 = KUTE.to("#battery-b1", { path: "#bookmark-b1" }, { duration: 5000 });
var morphB2 = KUTE.to("#battery-b2", { path: "#bookmark-b2" }, { duration: 5000 });

startButton.addEventListener(
  "click",
  function() {
    morphA.start();
    morphB1.start();
    morphB2.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