<svg version="1.1" id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="600px" height="207px" viewBox="0 0 600 207" style="enable-background:new 0 0 600 207;" xml:space="preserve">
<style type="text/css">
	.element{
  stroke:#88ce02;
  stroke-width:4px;
  fill:none;
  }
svg{
  background:#1d1d1d;
  }
	.st1{
  font-family:Arial;
  font-size:12;
  fill:#fff;
  }
.rule {
  fill:none;
  stroke:#d3d3d3;
  stroke-width:1px;
  }
</style>
<circle id="cssCircle" class="element" cx="57.464" cy="89.464" r="30.131"/>
<circle id="attrCircle" class="element" cx="358" cy="89.464" r="30.131"/>
<text transform="matrix(1 0 0 1 32.3333 27)" class="st1 red">CSSPlugin</text>
<text transform="matrix(1 0 0 1 327.8688 27)" class="st1">AttrPlugin</text>
<rect id="attrRectangle" x="327.869" y="145.667" class="element" width="134" height="49.333" rx="0"/>
  <line class="rule" x1="300" y1="46.595" x2="300" y2="192.595"/>
</svg><br>
 <button id="play" class="dark-grey-button club-demo-button">play</button>
</div>

body {
  margin-top: 10px;
  background: #282828;
  text-align: center;
  color: #ccc;
  font-family: sans-serif;
}

svg {
  margin-bottom:10px;
}

.gear {
  stroke:white;
  stroke-width:8px;
  fill: #88ce02;
}

.instructions {
  width: 600px;
  margin: auto;
  text-align: left;
}

a:link,
a:visited,
a:hover {
  color: #88ce02;
}

h2,
h3 {
  font-weight: normal;
}

li {
  margin-bottom: 6px;
}

var cssCircle = document.getElementById("cssCircle"),
    attrCircle = document.getElementById("attrCircle"),
    attrRectangle = document.getElementById("attrRectangle"),
    playBtn = document.getElementById("play"),
		tl = gsap.timeline({repeat:1, yoyo:true, repeatDelay:0.5, paused:true, defaults:{duration: 1}}); 

tl.to(cssCircle, {x:120, scale:2})
  .to(cssCircle, {duration: 0.5, strokeWidth:12, stroke:"white"})
  .to(attrCircle, {attr:{cx:500}})
  .to(attrCircle, {attr:{r:50}})
  .to(attrRectangle, {attr:{rx:"30"}});

play.onclick = function() {
  tl.restart();
}