<div class="container">
  
  <svg class="amp amp1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="16"/> <!-- stdDeviation is how much to blur -->
      <feOffset dx="4" dy="16" result="offsetblur"/> <!-- how much to offset -->
      <feComponentTransfer>
      <feFuncA type="linear" slope="0.2"/> <!-- slope is the opacity of the shadow -->
      </feComponentTransfer>
      <feMerge> 
      <feMergeNode/> <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
      </feMerge>
    </filter>
    <path class="path1" style="filter:url(#dropshadow)" d="M538.35,312.44l-.07-36.8c0-18.27-11.09-32.92-27.22-38a38.63,38.63,0,0,0-31.8-25.49,39.81,39.81,0,0,0,12.05-29.22l-.07-36.8a39,39,0,0,0-40-39.92h-.08l-72.4.13c-55.52.11-89.94,34.51-89.83,89.77l.13,69.6a60.21,60.21,0,0,0,7.34,28.79,60.23,60.23,0,0,0-7.24,28.81l.15,77.6c.07,34.3,13.37,54.6,24.51,65.59s31.33,23.84,65.4,23.84h.26l94.4-.18c22.8,0,40-17.27,39.92-40.08l-.19-100.35A38.3,38.3,0,0,0,527,341,40,40,0,0,0,538.35,312.44ZM406.19,223.09H407l-.22.22c-.21.21-.42.42-.62.64Z" fill="#008fce"/>
    </svg>
  <svg class="amp amp2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
    
    <path class="path2" style="filter:url(#dropshadow)" d="M530.35,312.46l-.07-36.8a32,32,0,0,0-9.12-22.91,31.13,31.13,0,0,0-16.51-8.47,30.93,30.93,0,0,0-8.34-15.48,32,32,0,0,0-22.86-9h-.07l-38,.08a32,32,0,0,0-22.9,9.12,30.89,30.89,0,0,0-8.15,14.93l-6.1,0-.06-28.8,53.2-.1A31.07,31.07,0,0,0,483.31,183l-.07-36.8a31,31,0,0,0-32-31.94h-.07l-72.4.13c-25.29,0-45.46,7.37-59.94,21.76s-21.95,34.67-21.9,60l.13,69.6a52,52,0,0,0,8.58,28.78,52,52,0,0,0-8.48,28.81l.15,77.6c.05,25.33,7.49,45.49,22.13,59.92s34.6,21.53,59.77,21.53h.25l94.4-.18a31,31,0,0,0,31.94-32.06l-.2-106.33a30.93,30.93,0,0,0,15.71-8.38A32,32,0,0,0,530.35,312.46Zm-126.67,69h-5.2l-.07-36.79,5.2,0Z" fill="#fff"/>
    </svg>
  <svg class="amp amp3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
    <path class="path3" style="filter:url(#dropshadow)" d="M522.28,275.67c0-14.11-9.88-24-24-24h-.85c0-14.11-9.89-24-24-24h-.06l-38,.08c-8.7,0-14.18,3.69-17.25,6.76s-6.72,8.58-6.7,17.28l-21.2,0-.08-44.8,61.19-.11c14.14,0,24-9.92,24-24l-.07-36.8c0-8.7-3.69-14.18-6.77-17.25s-8.55-6.7-17.22-6.7h-.05l-72.4.13c-23.11,0-41.39,6.58-54.32,19.43s-19.59,31.2-19.54,54.31l.13,69.6a43.74,43.74,0,0,0,10.64,28.78,43.76,43.76,0,0,0-10.54,28.82l.15,77.6c0,23.11,6.69,41.35,19.75,54.23s31.16,19.23,54.15,19.23h.24l94.4-.18c8.7,0,14.18-3.69,17.25-6.77s6.72-8.57,6.7-17.27l-.21-113.6h.8c8.7,0,14.18-3.69,17.25-6.77s6.72-8.58,6.7-17.28ZM411.7,389.48l-21.2,0h0l-.1-52.8,21.2,0Z" fill="#008fce"/>
    </svg>
  <svg class="amp amp4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">

    <path class="path4" style="filter:url(#dropshadow)" d="M514.28,275.69c0-9.56-6.44-16-16-16h-8.84v-8c0-9.55-6.44-16-16-16h0l-38,.08c-6,0-9.6,2.4-11.6,4.41s-4.38,5.65-4.37,11.62v8l-29.2.05h0c-2.05,0-4.79-.3-6.26-1.75s-1.72-3.93-1.72-5.83l-.08-45.2c0-2.1.27-4.9,1.64-6.3s4.21-1.71,6.34-1.72l61.2-.11c9.57,0,16-6.46,16-16l-.07-36.8c0-6-2.41-9.6-4.41-11.6s-5.64-4.37-11.58-4.37h0l-72.4.13c-20.93,0-37.31,5.8-48.69,17.11s-17.22,27.72-17.18,48.62l.13,69.6a35.85,35.85,0,0,0,14.31,28.77,35.87,35.87,0,0,0-14.21,28.82l.15,77.6c0,20.9,5.88,37.23,17.36,48.56s27.72,16.92,48.55,16.92h.21l94.4-.18c6,0,9.6-2.41,11.6-4.41s4.38-5.66,4.37-11.62l-.23-121.6h8.8c6,0,9.6-2.41,11.6-4.42s4.38-5.65,4.37-11.61ZM419.71,397.46l-29.2.06h-.06c-6.15,0-7.94-1.8-7.95-8l-.1-52.8c0-6.2,1.78-8,8-8l29.2-.06Z" fill="#fff"/>
    
    </svg>
  <svg class="amp amp5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
        <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="16"/> <!-- stdDeviation is how much to blur -->
      <feOffset dx="4" dy="16" result="offsetblur"/> <!-- how much to offset -->
      <feComponentTransfer>
      <feFuncA type="linear" slope="0.2"/> <!-- slope is the opacity of the shadow -->
      </feComponentTransfer>
      <feMerge> 
      <feMergeNode/> <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
      </feMerge>
    </filter>
<!--    <rect width="800" height="600" fill="#008fce" /> -->
    
    <path class="path5" style="filter:url(#dropshadow)" d="M451.23,138.21c5.19,0,8,2.78,8,8l.07,36.8c0,5.2-2.79,8-8,8l-61.19.11c-10.8,0-16,5.63-16,16l.08,45.2c0,10,5.63,15.59,16,15.57l37.2-.07,0-16c0-5.2,2.78-8,8-8l38-.08c5.2,0,8,2.79,8,8l0,16,16.8,0c5.2,0,8,2.78,8,8l.07,36.8c0,5.2-2.78,8-8,8l-16.8,0,.24,129.6c0,5.2-2.78,8-8,8l-94.4.18c-37.6.07-58-19.89-58.11-57.49l-.15-77.6c0-14.8,10.76-26,25.15-28.45V294c-14.4-2.37-25.23-13.55-25.25-28.35l-.13-69.6c-.08-37.6,20.29-57.64,57.89-57.71ZM390.37,320.72c-10.8,0-16,5.63-16,16l.1,52.8c0,10.8,5.63,16,16,16l37.2-.07-.16-84.8Z" fill="#008fce"/>
    </svg>
  
  <div class="spot"></div>
  
</div>


[[[https://codepen.io/petebarr/pen/2fc0573674b0f849badd58a15371534e]]]

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #008fce;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

// svg {
//  visibility: hidden;
// }

.container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 800px;
  height: 600px;
  visibility: hidden;
}

.spot {
  width: 300px;
  height: 300px;
  background: rgba(black, 0.05);
  border-radius: 50%;
}

.amp {
  position: absolute;
  top: 0;
  left: 0;
}

var $body = $('body'),
  $amp = $('.amp'),
  $amp1 = $('.amp1');

TweenMax.set('.container', {
  visibility: 'visible'
});

function initTilt() {
  TweenMax.set(".container", {perspective: 100, scale: 2});
  TweenMax.set('.amp', { transformStyle: "preserve-3d" });
  // thicker to thin
  TweenMax.set('.amp1', { z: -80, scale: 1.0 });
  TweenMax.set('.amp2', { z: -60, scale: .89 });
  TweenMax.set('.amp3', { z: -40, scale: .78 });
  TweenMax.set('.amp4', { z: -20, scale: .67 });
  TweenMax.set('.amp5', { z: 0, scale: .56 });
  
  TweenMax.staggerTo('.amp', 0.4, {
    // scale: '+=0.05',
    z: '+=10',
    yoyo: true, 
    repeat: -1,
    ease:Sine.easeInOut
  }, 0.07);
  
  $body.mousemove(function(e) {
    rotate(e.pageX, e.pageY)
  }); 
  
  window.addEventListener('touchstart', function(e) {
    clientX = e.touches[0].clientX;
    clientY = e.touches[0].clientY;
    // e.preventDefault();
    rotate(clientX, clientY);
  }, false);
};

function rotate(cx, cy) {
  var sxPos = (cx / $body.width()*100 - 50)*2 ;
  var syPos = (cy / $body.height()*100 - 50)*2;
  $amp.each(function() {
    TweenMax.to($(this), 3, {
      rotationY: -0.3 * sxPos,
      rotationX: 0.3 * syPos,
      transformOrigin: "center center -200",
      ease: Expo.easeOut
    });
  });
}

$body.mouseleave(function() {
  rotate($body.width()/2, $body.height()/2);
})

initTilt();

// console.clear();

/*  ==========================================================================
    Greensock Dev Tools
    ========================================================================== */  

//instantiate GSDevTools with default settings
// GSDevTools.create( );

/*  ==========================================================================
    FPS GUI stats.js
    ========================================================================== */  

// (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()