morphs an svg

app.js

var button = document.getElementById("toggle");

var morph = new TimelineMax({paused:true});
morph.to("#start", 1, { morphSVG: "#end", ease:Power1.easeInOut });

button.addEventListener("click", function() {
  if (morph.progress() === 0) {
    morph.play();
  } else {
    morph.reversed( !morph.reversed() );
  }
});

index.html

<button id="toggle">Warp it out</button>

<svg 
  version="1.1" 
  x="0px" y="0px" 
  viewBox="0 0 400 400" 
  enable-background="new 0 0 400 400" 
  xml:space="preserve"
>
  
	 <path 
    id="start" 
    d="M211.4,309.1l-42.2-24.8v23h-136V102.1h64.4l8.9,16.3c17.8-16.3,33-22.2,55.2-22.2c25.9,0,45.2,9.3,60.4,28.5 c20-21.1,37.8-28.5,64.8-28.5c48.9,0,77,29.6,77,81.5v129.6H256.6v-23.7L211.4,309.1z M278,285.8h64.8V177.7c0-40-18.9-60-55.6-60 c-24.4,0-37.4,7-57.8,31.5l-10,12.2l-7.8-13.7c-12.2-21.1-26.7-29.6-50-29.6c-20.4,0-31.5,5.9-50,25.9l-10,11.1l-17-31.1h-30v161.9 h92.6V247l64.4,37.4l66.3-37v38.4H278z"
  />
  
	<path 
	  id="end" 
	  d="M199,31c-93.3,0-169,75.7-169,169s75.7,169,169,169s169-75.7,169-169S292.3,31,199,31z M201,341c-77.9,0-141-63.1-141-141
		S123.1,59,201,59s141,63.1,141,141S278.9,341,201,341z"
	/>
  
</svg>

style.css

.svg {
  width: 250px;
  height: 250px;
  margin: 20px auto;
  display: block;
}

#end {
  display: none;
  fill: white;
}

body {
  text-align: center;
  padding: 20px;
}

see it in action:
http://codepen.io/alexG530902/pen/gMPpjE