<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
<defs>
  <pattern patternUnits="userSpaceOnUse"  id="bgPattern" width="4" height="4" x="0" y="0">
    <rect width="4" height="4" fill="#F9F9EF"/>
    
    <rect width="1" height="1" fill="#D6D3CC"/>
  <rect x="3" width="1" height="1" fill="#D6D3CC"/>    
   <rect  x="2" y="3"width="1" height="1" fill="#E6E4DB"/>
  <rect x="4" y="3" width="1" height="1" fill="#E6E4DB"/>    
  </pattern>  
  	<circle id="selectionDot" cy="304" r="27"/>
  
  <clipPath id="menuMask0">
	<circle id="menuDot0"  cx="284" cy="304" r="30"/>
  </clipPath>
  <clipPath id="menuMask1">
  <circle id="menuDot1"  cx="361" cy="304" r="30"/>
  </clipPath>
  <clipPath id="menuMask2">
  <circle id="menuDot2" cx="438" cy="304" r="30"/>
  </clipPath>  
  <clipPath id="menuMask3">
  <circle id="menuDot3"  cx="515"  cy="304" r="30"/>
  </clipPath>  
  

  <mask id="mainMask">
  <rect width="100%" height="100%" fill="#FFF" />
    
    <use xlink:href="#menuDot0" fill="#000"/>
<use xlink:href="#menuDot1" fill="#000" />
<use xlink:href="#menuDot2" fill="#000" />
<use xlink:href="#menuDot3" fill="#000" />

  </mask>
  <filter id="glow" x="-100%" y="-100%" width="350%" height="350%" color-interpolation-filters="sRGB">
        <feGaussianBlur stdDeviation="2" result="coloredBlur" />
        <feOffset dx="0" dy="7" result="offsetblur"></feOffset>
        <feFlood id="glowAlpha" flood-color="#000" flood-opacity="0.095"></feFlood>
        <feComposite in2="offsetblur" operator="in"></feComposite>
        <feMerge>
          <feMergeNode/>          
          <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge>
      </filter>      
</defs>
<!-- <use xlink:href="#menuGroup" fill="#5C4F71"/> -->
<g id="menuGroup" fill="#5C4F71">
  <use xlink:href="#menuDot0" class="menuItem" ><title>Shopping</title></use>

<use xlink:href="#menuDot1" class="menuItem" ><title>Settings</title></use>
<use xlink:href="#menuDot2" class="menuItem" ><title>Chat</title></use>
<use xlink:href="#menuDot3" class="menuItem" ><title>Notification</title></use>
  
	<use xlink:href="#menuDot0" class="menuHit" fill="#ededed" opacity="0" />
<use xlink:href="#menuDot1" class="menuHit" fill="#ededed" opacity="0" />  
<use xlink:href="#menuDot2" class="menuHit" fill="#ededed" opacity="0" />    
<use xlink:href="#menuDot3" class="menuHit" fill="#ededed" opacity="0" />    
</g>  
  
<g filter="url(#glow)" id="menuShadow">
<g mask="url(#mainMask)">
<rect width="100%" height="100%" fill="#423852" <!-- fill="url(#bgPattern)" --> />  
  </g>
  </g>
  
  <g id="selectionDotGroup0"  clip-path="url(#menuMask0)">
    <use xlink:href="#selectionDot" class="selectionDot"  fill="#E15E58"/>
  </g>  
  <g id="selectionDotGroup1"  clip-path="url(#menuMask1)">
    <use xlink:href="#selectionDot" class="selectionDot" fill="#FABB74"/>
  </g>
  <g id="selectionDotGroup2"  clip-path="url(#menuMask2)">
    <use xlink:href="#selectionDot" class="selectionDot" fill="#73AFCE"/>
  </g>
 <g id="selectionDotGroup3"  clip-path="url(#menuMask3)">
    <use xlink:href="#selectionDot" class="selectionDot" fill="#E16596"/>
  </g>
    
  
  
<g id="dimIconGroup">
	<path fill="#9387A9" d="M285.3,302C285.3,302.1,285.3,302.1,285.3,302l-0.4,0.7c-0.3,0.6-1,0.8-1.6,0.5c-0.6-0.3-0.8-1-0.5-1.6
		l0.4-0.7l0.6-1.1l3-5.8c0.1-0.2,0.4-0.3,0.6-0.2l1.3,0.7c0.2,0.1,0.3,0.4,0.2,0.6L285.3,302z M294.3,302v1.6c0,0.5-0.4,0.8-0.8,0.8
		h-0.9v9.3c0,0.5-0.4,0.8-0.8,0.8h-15.7c-0.5,0-0.8-0.4-0.8-0.8v-9.3h-0.9c-0.5,0-0.8-0.4-0.8-0.8V302c0-0.5,0.4-0.8,0.8-0.8h7.3
		c-0.3,0.5-0.3,1.2-0.1,1.7c0.2,0.6,0.6,1.1,1.2,1.4c0.3,0.2,0.7,0.3,1.1,0.3c0.9,0,1.7-0.5,2.1-1.3l0.3-0.6c0,0,0.1-0.1,0.1-0.1
		l0.8-1.4h6.3C293.9,301.2,294.3,301.6,294.3,302z M279.8,310.5c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6
		c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V310.5z M279.8,306.9c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6
		c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V306.9z M283.3,310.5c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6
		c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V310.5z M283.3,306.9c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6
		c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V306.9z M284.6,308.5c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4v-1.6
		c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4V308.5z M286.9,310.5c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6
		c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V310.5z M290.4,310.5c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6
		c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V310.5z M290.4,306.9c0-0.2-0.2-0.4-0.4-0.4h-1.6c-0.2,0-0.4,0.2-0.4,0.4v1.6
		c0,0.2,0.2,0.4,0.4,0.4h1.6c0.2,0,0.4-0.2,0.4-0.4V306.9z"/>

	<path fill="#9387A9" d="M371.2,302.5h-2.2c-0.2-0.9-0.6-1.7-1-2.5l1.6-1.6c0.2-0.2,0.2-0.4,0-0.6l-1.8-1.8c-0.2-0.2-0.4-0.2-0.6,0
		l-1.5,1.5c-0.8-0.5-1.6-0.9-2.5-1.1v-2.2c0-0.2-0.2-0.4-0.4-0.4h-2.6c-0.2,0-0.4,0.2-0.4,0.4v2.2c-0.9,0.2-1.8,0.6-2.6,1.1
		l-1.6-1.6c-0.2-0.2-0.4-0.2-0.6,0l-1.8,1.8c-0.2,0.2-0.2,0.4,0,0.6l1.6,1.6c-0.5,0.7-0.8,1.6-1,2.5h-2.3c-0.2,0-0.4,0.2-0.4,0.4
		v2.6c0,0.2,0.2,0.4,0.4,0.4h2.3c0.2,0.9,0.6,1.8,1.1,2.5l-1.6,1.6c-0.2,0.2-0.2,0.4,0,0.6l1.8,1.8c0.2,0.2,0.4,0.2,0.6,0l1.6-1.6
		c0.8,0.5,1.6,0.8,2.5,1v2.2c0,0.2,0.2,0.4,0.4,0.4h2.6c0.2,0,0.4-0.2,0.4-0.4v-2.2c0.9-0.2,1.7-0.5,2.5-1l1.6,1.6
		c0.2,0.2,0.4,0.2,0.6,0l1.8-1.8c0.2-0.2,0.2-0.4,0-0.6l-1.5-1.5c0.5-0.8,0.9-1.6,1.1-2.6h2.2c0.2,0,0.4-0.2,0.4-0.4v-2.6
		C371.7,302.7,371.5,302.5,371.2,302.5z M361.4,308.1c-2.1,0-3.9-1.7-3.9-3.9c0-2.1,1.7-3.9,3.9-3.9c2.1,0,3.9,1.7,3.9,3.9
		C365.2,306.3,363.5,308.1,361.4,308.1z"/>
	<path fill="#9387A9" d="M449,303.5v6.6c0,0.9-0.7,1.5-1.5,1.5H447l0,2.5l-3.6-2.5h-5.7c-0.9,0-1.5-0.7-1.5-1.5v-2.3h6.4
		c1.8,0,3.2-1.4,3.2-3.2v-2.6h1.7C448.3,301.9,449,302.6,449,303.5z M442.5,306.5h-7.2l-4.5,3.1l0-3.1h-0.6c-1.1,0-1.9-0.9-1.9-1.9
		v-8.3c0-1.1,0.9-1.9,1.9-1.9h12.3c1.1,0,1.9,0.9,1.9,1.9v8.3C444.5,305.6,443.6,306.5,442.5,306.5z M434.1,300.2c0-0.5-0.4-1-1-1
		c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1C433.6,301.2,434.1,300.8,434.1,300.2z M437.4,300.2c0-0.5-0.4-1-1-1c-0.5,0-1,0.4-1,1
		c0,0.5,0.4,1,1,1C436.9,301.2,437.4,300.8,437.4,300.2z M440.6,300.3c0-0.5-0.4-1-1-1c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1
		C440.2,301.3,440.6,300.9,440.6,300.3z"/>
	<path fill="#9387A9" d="M525,312.4h-6.1c-0.2,1.2-1.4,2.1-2.9,2.1c-1.5,0-2.8-0.9-2.9-2.1H507v-2.6c2.1-1.1,2.6-2.7,2.6-3.5
		c0,0,0-4,0-4.2c0-3.1,2.2-5.6,5-6.3v-0.5c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4v0.6c2.7,0.6,4.7,2.9,5,5.6l0,4.8
		c0.1,0.8,0.6,2.4,2.7,3.5V312.4z"/>		
</g>  

</svg>

body {
  background-color: #423852;
  overflow: hidden;
}

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

svg {
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.selectionDot,
#menuShadow,
#dimIconGroup > path,
.menuHit {
  pointer-events: none;
}

.menuItem {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  dotPos = {
    x: 0,
    y: 304
  },
  allMenus = selectAll('.menuItem'),
  allMenuHits = selectAll('.menuHit'),
  allMenuPosArray = [],
  oldId = 0,
  currentId = 1,
  iconObj = []

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

function setUI() {
  for (var i = 0; i < allMenus.length; i++) {
    var menu = allMenus[i];
    menu.setAttribute('menuId', i);
    menu.onclick = onMenuClick;
    allMenuPosArray.push({
      x: Number(select('#menuDot' + i).getAttribute('cx')),
      y: Number(select('#menuDot' + i).getAttribute('cy'))
    })
    var icon = selectAll('#dimIconGroup path')[i];
    var fill = selectAll('.selectionDot')[i].getAttribute('fill');
    console.log(fill)
    iconObj.push({
      icon: icon,
      fill: fill
    })
  }

  onMenuClick({
    currentTarget: allMenus[0]
  })
}

function onMenuClick(e) {

  oldId = currentId;

  if (oldId == Number(e.currentTarget.getAttribute('menuId'))) {
    return
  }
  currentId = (e) ? Number(e.currentTarget.getAttribute('menuId')) : currentId;

  if (e) {
    TweenMax.from(e.currentTarget, 1, {
      //scale:0.39,
      transformOrigin: '50% 50%'
    })
    TweenMax.fromTo(allMenuHits[currentId], 1, {
        alpha: 0.3,
        scale: 1
      }, {
        alpha: 0,
        scale: 0.85,
        transformOrigin: '50% 50%'
      })
      /*     TweenMax.fromTo(iconObj[oldId].icon, 1, {
            fill:iconObj[oldId].fill
          },{
            fill:'#9387A9',
            ease:Power2.easeIn
          })  */
  }

  //animates the masked, coloured selection dots
  var tl = new TimelineMax();
  tl.to('.selectionDot', 0.5, {
      scale: 0.6,
      transformOrigin: '50% 50%',
      ease: Power2.easeIn
    })
    .to('.selectionDot', 0.5, {
      x: allMenuPosArray[currentId].x,
      //ease:Elastic.easeOut.config(0.6, 0.8)
      ease: Circ.easeInOut
    }, '-=0.25')
    .to('.selectionDot', 0.9, {
      scale: 1,
      transformOrigin: '50% 50%',
      ease: Elastic.easeOut.config(0.6, 0.8)
    }, '-=0.25')

  //turns the pointer on and off
  TweenMax.staggerTo(allMenus, 0, {
    cycle: {

      cursor: function(i) {

        return (i == currentId) ? 'auto' : 'pointer'
      }
    }
  }, 0)

  TweenMax.staggerTo(selectAll('#dimIconGroup path'), 0.6, {
    cycle: {
      fill: function(i) {

        return (i == currentId) ? '#FFF' : '#9387A9'
      },
      scale: function(i) {

        return (i == currentId) ? 1.2 : 0.8
      },
      duration: function(i) {

        return (i == currentId) ? 1.4 : 0.2
      },
      ease: function(i) {

        return (i == currentId) ? Power4.easeInOut : Linear.easeNone
      }
    },
    transformOrigin: '50% 50%'
  }, 0)
}

setUI();
TweenMax.globalTimeScale(1.2)