<h3>Spin/drag the SVG dial. Click on a blue DOM element circle to see the magic!</h3>
<div class="circleHolder"></div>

<svg id="svg" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
<g id="gear">
	<path fill="#F4F4F4" stroke="#000000" stroke-miterlimit="10" d="M357.483,157.251c-12.491-0.651-23.885,4.055-32.096,12.026
		c-13.898,13.492-32.183,21.526-51.553,21.526h-14.729c-27.564,0-49.908-22.345-49.908-49.908v-26.973
		c0-13.844,6.376-26.902,17.257-35.462c10.513-8.271,17.056-21.36,16.296-35.943c-1.144-21.935-19.127-39.648-41.076-40.485
		c-24.406-0.93-44.483,18.579-44.483,42.777c0,13.087,5.874,24.799,15.129,32.648c11.52,9.77,18.483,23.863,18.483,38.968v24.469
		c0,27.564-22.345,49.908-49.908,49.908h-20.576c-16.564,0-32.508-6.848-43.51-19.231c-8.306-9.349-20.645-15.033-34.292-14.321
		c-21.935,1.144-39.648,19.127-40.485,41.076c-0.93,24.405,18.579,44.483,42.777,44.483c12.305,0,23.395-5.193,31.201-13.507
		c12.101-12.888,29.057-20.105,46.735-20.105h18.149c27.564,0,49.908,22.345,49.908,49.908v19.166
		c0,17.462-7.602,33.854-20.27,45.874c-8.728,8.282-13.968,20.204-13.283,33.338c1.144,21.935,19.127,39.648,41.076,40.485
		c24.405,0.93,44.483-18.579,44.483-42.777c0-13.087-5.874-24.799-15.129-32.648c-11.938-10.125-18.483-25.24-18.483-40.893v-22.543
		c0-27.564,22.345-49.908,49.908-49.908h18.74c17.301,0,34.074,6.896,45.742,19.671c7.825,8.567,19.085,13.941,31.603,13.941
		c24.198,0,43.708-20.078,42.777-44.483C397.163,177.208,378.588,158.351,357.483,157.251z"/>
	<circle id="pink" cx="43.779" cy="200" r="33.779"/>
	<circle cx="356.221" cy="200" r="33.779"/>
	<circle cx="200.334" cy="41.773" r="33.779"/>
	<circle cx="200" cy="356.221" r="33.779"/>
</g>
  <rect id="trigger" fill="#88CE02" x="-10" y="-10" width="73" height="33"/>
</svg>
body {
  background:#111;
  margin:0;
  padding:0;
  font-family: Signika Negative;
}

h3 {
  color: white;
  font-family: Signika Negative; 
  font-size: 21px;
  margin-left: 15px;
}

#svgWrapper {
  width:400px;
  height:400px;
}

svg {
  display:block;
  position:relative;
  margin: 50px;
  border: 10px solid #88CE02;
  overflow: visible;
}

.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2F83C1;
  position: relative;
  margin: 5px;
  cursor: pointer;
}

#pink {
  fill: #CE4C9C;
}

.circleHolder {
  position: absolute;
  padding: 5px;
  z-index: 200;
  background: #ccc;
  
}

circle {
  fill: #6A6D6D;
  stroke: black;
  stroke-miterlimit: 10;
}
gsap.registerPlugin(MotionPathPlugin, Draggable, InertiaPlugin);

var pink = document.querySelector("#pink");

function toPinkCircle(element) {
    var p = MotionPathPlugin.getRelativePosition(element, pink, [0.5, 0.5], [0.5, 0.5]);
    gsap.timeline()
        .to(element, {
            x: "+=" + p.x, 
            y: "+=" + p.y
        }).to(element, {scale: 5, backgroundColor: "white", autoAlpha: 0, duration: 1});
}



// create 16 blue circle <div> elements and drop them into the ".circleHolder" <div>
var circleHolder = document.querySelector(".circleHolder"),
    circles = [],
    i = 16,
    circle;
while (i--) {
  circle = document.createElement("div");
  circle.setAttribute("class", "circle");
  circleHolder.appendChild(circle);
  circle.addEventListener("click", function(event) {
    toPinkCircle(event.target);
  });
}

// initially apply some funky transforms to the various elements.
gsap.to("svg", { rotation:-20, x:200, y: 20, duration:1.5 });
gsap.to(".circleHolder", {rotation: -10, scale: 0.5, transformOrigin:"left top", duration: 1.5, delay:1});
gsap.to("#gear", {rotation:180, transformOrigin:"50% 50%", duration:1, delay:1.5});

// make the gear spinnable, and the SVG container draggable
Draggable.create("#gear", { type: "rotation", inertia: true });
Draggable.create("#svg", { trigger: "#trigger", zIndexBoost: false });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/Draggable.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/MotionPathPlugin.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js