<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/chrisgannon/pen/EyaPZZ?limit=all&page=7&q=svg" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">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);
}</style></head><body>
<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>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js'></script><script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
<script >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++) {if (window.CP.shouldStopExecution(1)){break;}
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
})
}
window.CP.exitedLoop(1);
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)
//# sourceURL=pen.js
</script>
</body></html>
