<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 601 193">
  <path id="square" class="shape" fill="#9993B1" stroke="#223C37" stroke-miterlimit="10" d="M75 65.8h37v37H75z" />
  <circle class="shape" fill="#9CA9D0" stroke="#223C37" stroke-miterlimit="10" cx="229" cy="84" r="25" />
  <path class="shape" fill="none" stroke="#9993B1" stroke-width="3" stroke-miterlimit="10" d="M514.5 41v87" />
  <path class="shape" fill="#A3BEEA" stroke="#223C37" stroke-miterlimit="10" d="M399.5 107.3l-17.3-7.1-15.6 10.3 1.3-18.7-14.5-11.7 18.1-4.4 6.6-17.5 9.9 15.9 18.7.9-12.1 14.2z" />
</svg>

<div class="wrap">
  <div class="check">
    See bounding box stroke<br>
    <input type="checkbox" id="ch1" class="ch1" checked="true"/>
    <label class="checktrue" for="ch1"></label>
  </div><!--check-->
</div><!--wrap-->

$dk-green: #223C37;
$green: lighten($dk-green, 5%);
$blue: #9993B1;

body {
  background: #354A48;
  font-family: 'Fjalla One';
  color: $blue;
}

.boundingBox {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translateZ(0);
  perspective: 1000px;
  backface-visibility: hidden;
}

.borderStyle {
  border: 1px solid #D68370;
}

.wrap {
  position: fixed;
  top: 20px;
  left: 50%;
  color: desaturate($blue, 10%);
  font-size: 20px;
  text-transform: uppercase;
  width: 300px;
  margin-left: -150px;
  .check {
    float: left;
    margin-left: 30px;
  }
  input { 
    position:absolute; 
    left:-9999px; 
  }
}

.checktrue {
  position: relative; 
  display: block;
  margin: 5px 0 0 70px;
  width: 55px; 
  height: 26px;
  cursor: pointer;
  border-radius: 15px;
  transition: 350ms;
  background: linear-gradient(rgba(#000,0.07),rgba($green,0)),$dk-green;
}

.checktrue::after {
  position: absolute; content:'';
  width: 20px; 
  height: 20px;
  top: 3px; 
  left: 5px;
  border-radius: 50%;
  transition: 250ms ease-in-out;
  background: linear-gradient($green 10%,$dk-green);
  box-shadow:
    0 0.1em 0.15em -0.05em rgba($dk-green,.5
    ) inset,
    0 0.2em 0.2em -0.12em rgba(#000,.5);
}

.checktrue::before {
  position: absolute; 
  content:'';
  width: 42px; 
  height: 16px;
  top: 5px; 
  left: 7px;
  border-radius: 15px;
  transition: 250ms ease-in-out;
  background: linear-gradient(rgba(#000,0.07),rgba($dk-green,0.1)),lighten($green, 3%);
  box-shadow:
    0 0.05em 0.15em -0.1em rgba(#000,.5) inset,
    0 0.04em 0.06em -0.01em rgba($dk-green,.5),
    0 0 0 0 rgba(#000,.5) inset;
}

input:checked + .checktrue::before {
  box-shadow:
    0 0.08em 0.15em -0.1em rgba(#000,.5) inset,
    0 0.05em 0.08em -0.01em rgba($dk-green,.5),
    3em 0 0 0 rgba($blue,.7) inset;
}

input:checked + .checktrue::after {
	left: 30px;
}

var shape = $(".shape");
bbA = [],
  svg = document.getElementById("svg"),
  //create 4 points, one for each corner (top left, top right, bottom right, bottom left)
  p1 = svg.createSVGPoint(),
  p2 = svg.createSVGPoint(),
  p3 = svg.createSVGPoint(),
  p4 = svg.createSVGPoint();

TweenMax.to(shape, 4, {
  rotation: 360,
  transformOrigin: "50% 50%",
  repeat: -1,
  yoyo: true,
  ease: Linear.easeNone
});

for (var i = 0; i < shape.length; i++) {
  var boundingBox = document.createElement("div");
  boundingBox.setAttribute("class", "boundingBox");
  document.body.appendChild(boundingBox);
  bbA.push(boundingBox);
}

function updateBounds(element, bb) {
  var bbox = element.getBBox(),
    matrix = element.getCTM(),
    style = bb.style,
    left, top;
  //set the x/y of each corner
  p1.x = p4.x = bbox.x;
  p1.y = p2.y = bbox.y;
  p2.x = p3.x = bbox.x + bbox.width;
  p3.y = p4.y = bbox.y + bbox.height;
  //translate the points according to the transform matrix
  p1 = p1.matrixTransform(matrix);
  p2 = p2.matrixTransform(matrix);
  p3 = p3.matrixTransform(matrix);
  p4 = p4.matrixTransform(matrix);
  //figure out which ones are smallest (for top and left)
  top = Math.min(p1.y, p2.y, p3.y, p4.y);
  left = Math.min(p1.x, p2.x, p3.x, p4.x);
  //now set the style of the absolutely-positioned <div> elements to reflect the bounding box. 
  style.top = top + "px";
  style.left = left + "px";
  style.width = (Math.max(p1.x, p2.x, p3.x, p4.x) - left) + "px";
  style.height = (Math.max(p1.y, p2.y, p3.y, p4.y) - top) + "px";
}

TweenLite.ticker.addEventListener("tick", function() {
  for (var i = 0; i < shape.length; i++) {
    updateBounds(shape[i], bbA[i]);
  }
});

$("#ch1").on("click", function() {
  var isChecked = $('#ch1').is(':checked'),
      bSt = $(".boundingBox");
  if (!isChecked) {
    bSt.addClass("borderStyle");
  } else {
    bSt.removeClass("borderStyle");
  }
});