<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;
}
View Compiled
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");
}
});
This Pen doesn't use any external CSS resources.