<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>

<p>Each green box is a &lt;rect&gt; with a class of "box" inside an &lt;svg&gt;<p>

<button class="dark-grey-button club-demo-button" id="svgOrigin">spin each box around &lt;svg&gt; center</button>

<button class="dark-grey-button club-demo-button" id="transformOrigin">spin each box around its own center</button>
<code id="tweenCode">//sample code</code>
<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="300px" height="200px" viewBox="0 0 300 200" style="enable-background:new 0 0 300 200;" xml:space="preserve">
<style type="text/css">
	.box{fill:#88ce02;}
</style>
<rect x="150" y="100" class="box" width="50" height="50"/>
<rect x="105.377" y="13.156" class="box" width="31.934" height="31.934"/>
<rect x="250.08" y="150" class="box" width="31.934" height="31.934"/>
<rect x="53.181" y="109.162" class="box" width="31.676" height="31.676"/>
<rect x="251.577" y="22.717" class="box" width="32.968" height="32.968"/>
<rect x="21.398" y="29.123" class="box" width="41.43" height="41.43"/>
</svg>

body {
  background:#1d1d1d;
   font-family: Signika Negative, sans-serif;
  color:white;
  padding: 12px;
}

svg {
  background:#000;
}


h1 {
  margin: 5px 0;
}
p {
  margin:0;
  font-size:24px;
  font-weight:300;
}


.box {
  width:50px;
  height:50px;
  position:relative;
  margin-bottom:2px;
}

.red {
  background-color:red;
}

.blue {
  background-color:blue;
}

.nav {
  width:600px;
  background-color:#ccc;
  text-align:right;
}

button {
  padding:10px;
  margin:10px;
}

.club-demo-button {
  font-weight:400;
  margin:10px 10px 10px 0;
  text-transform:none;
  font-size:18px;
}

code {
  display:block;
  color:#ccc;
  padding:10px;
  font-size:18px;
}

var svgOriginButton = document.getElementById("svgOrigin"),
    transformOriginButton = document.getElementById("transformOrigin"),
    tweenCode = document.getElementById("tweenCode"),
		boxes = document.querySelectorAll(".box"),
    tween = gsap.to({}, {duration: 1});

function svgOriginRotation() {
  tween.seek(0).kill(); //reset
  tween = gsap.to(boxes, {duration: 1, rotation:360, svgOrigin:"150 100"});
  //svgOrigin only supports px-based values (no percentages).

  tweenCode.innerHTML = 'gsap.to(".box", {duration: 1, rotation:360, svgOrigin:"150 100"});';
}

function transformOriginRotation() {
  tween.seek(0).kill(); //reset
  tween = gsap.to(boxes, {duration: 1, rotation:360, transformOrigin:"50% 50%"});
  tweenCode.innerHTML = 'gsap.to(".box", {duration: 1, rotation:360, transformOrigin:"50% 50%"});'
}

svgOriginButton.onclick = svgOriginRotation;
transformOriginButton.onclick = transformOriginRotation;