<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="800px" height="400px" viewBox="0 0 800 400" style="enable-background:new 0 0 800 400;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#1D1D1D;}
	.st1{fill:#89C540;}
	.st2{fill:#E24B6C;}
</style>
<rect id="background" class="st0" width="800" height="400"/>
<circle id="circle" class="st1" cx="529.866" cy="199.658" r="42.5"/>
<rect id="square" x="362.869" y="157.158" class="st1" width="85" height="85"/>
<polygon id="triangle" class="st1" points="241.057,242.158 283.557,157.158 326.057,242.158 "/>
<g id="letters">
	<path id="a" class="st2" d="M222.838,264.526c0-0.68,0.203-1.632,0.612-2.856l48.373-134.098c0.679-2.175,3.399-3.266,8.164-3.266
		h5.919c4.761,0,7.481,1.091,8.164,3.266l48.372,134.301c0.409,0.953,0.613,1.838,0.613,2.653c0,2.316-2.928,3.47-8.777,3.47h-1.632
		c-4.765,0-7.484-1.088-8.164-3.265l-12.042-33.474h-60.006l-11.634,33.474c-0.683,2.177-3.402,3.265-8.164,3.265h-1.021
		C225.762,267.997,222.838,266.842,222.838,264.526z M258.147,215.747h48.781l-21.431-60.825l-2.653-11.838l-3.266,11.838
		L258.147,215.747z"/>
	<path id="b" class="st2" d="M364.571,262.89V132.263c0-4.082,2.041-6.123,6.123-6.123h36.533c14.829,0,26.159,3.266,33.984,9.797
		c7.823,6.532,11.736,15.308,11.736,26.33c0,6.805-2.244,13.267-6.735,19.39c-4.491,6.123-9.731,10.001-15.716,11.633v0.816
		c2.041,0.275,5.033,1.499,8.981,3.674c3.945,2.178,7.176,4.388,9.695,6.633c2.515,2.245,4.796,5.478,6.837,9.696
		s3.062,8.846,3.062,13.879c0,27.349-17.757,41.024-53.27,41.024h-35.106C366.613,269.013,364.571,266.972,364.571,262.89z
		 M382.532,187.78h23.675c8.164,0,14.901-2.312,20.207-6.94c5.306-4.624,7.961-10.511,7.961-17.655
		c0-7.144-2.316-12.517-6.94-16.124c-4.628-3.604-11.975-5.409-22.043-5.409h-22.86V187.78z M382.532,253.502h29.798
		c8.981,0,15.922-2.348,20.819-7.042c4.899-4.694,7.349-10.987,7.349-18.88c0-7.889-2.689-13.911-8.062-18.062
		c-5.378-4.15-13.235-6.227-23.574-6.227h-26.33V253.502z"/>
	<path id="c" class="st2" d="M471.736,197.659c0-48.44,22.043-72.661,66.128-72.661c9.799,0,18.744,1.397,26.84,4.185
		c8.094,2.79,12.145,5.613,12.145,8.47c0,1.906-0.851,4.356-2.551,7.348c-1.704,2.994-3.163,4.49-4.389,4.49
		c-0.273,0-1.734-0.746-4.387-2.245c-2.655-1.495-6.43-2.991-11.329-4.49c-4.897-1.496-10.205-2.245-15.92-2.245
		c-16.466,0-28.575,4.56-36.33,13.675c-7.756,9.117-11.634,23.574-11.634,43.372s3.843,34.289,11.533,43.474
		c7.686,9.185,19.559,13.777,35.617,13.777c6.123,0,11.903-0.847,17.349-2.551c5.439-1.7,9.659-3.398,12.653-5.103
		c2.992-1.7,4.696-2.551,5.103-2.551c1.226,0,2.721,1.499,4.491,4.491c1.768,2.994,2.653,5.172,2.653,6.532
		c0,3.131-4.253,6.362-12.756,9.695c-8.505,3.335-18.337,5.001-29.491,5.001c-22.451,0-39.019-5.884-49.7-17.656
		C477.074,240.898,471.736,222.56,471.736,197.659z"/>
</g>
</svg>
body {
 margin:0;
 background:#333;
}
svg {
  display: block;
  margin: 0 auto;
  width:600px;
}

#letters{
  visibility:hidden;
}

MorphSVGPlugin.convertToPath("circle, rect, polygon");

var tl = gsap.timeline({repeat:20, repeatDelay:0.3, yoyo:true, defaults:{duration:1}})

tl.to("#triangle", {morphSVG:"#a"}, "+=0.5")
  .to("#square", {morphSVG:"#b"})
  .to("#circle", {morphSVG:"#c"})
  .timeScale(3)

External CSS

  1. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js