<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
);