<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/NNJLrY?limit=all&page=18&q=svg" />
<style class="cp-pen-styles">body {
background-color:#eceff1;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg{
width:100%;
height:100%;
visibility:hidden;
}
#hit{
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">
<title>SVG Download</title>
<defs>
<clipPath id="mainCircleMask">
<circle fill="none" stroke="#000000" stroke-width="14.9511" stroke-miterlimit="10" cx="400" cy="319.7" r="121"/>
</clipPath>
</defs>
<path id="outlineBg" stroke="#CFD8DC" d="M400,192.12A127.62,127.62,0,1,0,527.62,319.73,127.62,127.62,0,0,0,400,192.12z" fill="none" stroke-miterlimit="10" stroke-width="15"/>
<line id="baseStart" x1="338" y1="431.5" x2="461" y2="431.5" fill="none" stroke="#607D8B" stroke-miterlimit="10" stroke-width="15"/>
<path id="outline" stroke="#607D8B" d="M400,192.12A127.62,127.62,0,1,0,527.62,319.73,127.62,127.62,0,0,0,400,192.12z" fill="none" stroke-miterlimit="10" stroke-width="15"/>
<path id="baseEnd" stroke="none" d="M338.37,431.5a127.74,127.74,0,0,0,123.26,0" fill="none" stroke="#607D8B" stroke-miterlimit="10" stroke-width="15"/>
<g clip-path="url(#mainCircleMask)">
<polygon id="arrow" fill="#607D8B" points="427,344 462.7,344 400,407.6 337.3,344 373,344 373,290 427,290 "/>
<polygon id="tick" fill="#4BAE4F" points="386,381.2 340.9,336.1 362,312 386,336.1 453.8,260.8 476.4,284.9 "/>
</g>
<path id="hit" stroke="#607D8B" fill="transparent" d="M400,192.12A127.62,127.62,0,1,0,527.62,319.73,127.62,127.62,0,0,0,400,192.12z" stroke-miterlimit="10" stroke-width="0"/>
</svg>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script><script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script><script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/AnticipateEase.min.js'></script>
<script >MorphSVGPlugin.convertToPath('line, polygon');
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);
},
arrow = select('#arrow'),
baseStart = select('#baseStart'),
outlineBg = select('#outlineBg'),
tick = select('#tick'),
baseEnd = select('#baseEnd'),
baseStartPath = baseStart.getAttribute('d'),
hit = select('#hit'),
outline = select('#outline')
TweenMax.set('svg', {
visibility: 'visible'
})
TweenMax.set(outline, {
stroke: 'transparent',
drawSVG: '41.9% 57.9%'
})
TweenMax.set(outlineBg, {
//stroke:'transparent',
drawSVG: '50% 50%'
})
var tl = new TimelineMax({
repeat: 0
});
tl.to(arrow, 0.5, {
y: -50,
ease: Power1.easeOut
})
.to(arrow, 0.5, {
y: 40,
ease: Power3.easeIn
})
.to(baseStart, 0.05, {
morphSVG: {
shape: baseEnd
},
ease: Linear.easeNone
}, '-=0.05')
.to(arrow, 2, {
y: -20,
//delay:0.2,
ease: Elastic.easeOut.config(0.8, 0.6)
})
.set(outline, {
stroke: '#607D8B'
}, '-=2')
.set(baseStart, {
stroke: 'transparent'
}, '-=2')
.to(outline, 2, {
drawSVG: '100% 100%',
ease: Anticipate.easeOut
}, '-=2')
.to(outlineBg, 2, {
drawSVG: '0% 100%',
ease: Anticipate.easeOut
}, '-=2')
.to(outline, 4, {
drawSVG: '100% 0%',
ease: SteppedEase.config(36)
}, '-=0')
/* .to(outline, 2, {
drawSVG:'0% 100%',
ease:Anticipate.easeOut
},'-=2')
*/
/* .to(arrow, 1, {
morphSVG:{shape:tick},
ease:Elastic.easeOut.config(0.5, 0.4)
}) */
.to(arrow, 1.2, {
y: 200,
ease: Anticipate.easeOut
})
.from(tick, 1.2, {
y: -200,
//ease:Anticipate.easeIn,
ease: Power3.easeInOut,
transformOrigin: '50% 50%'
}, '-=1.2')
.fromTo(arrow, 1, {
y: -220
}, {
y: 0,
delay: 1,
immediateRender: false,
ease: Anticipate.easeOut
})
.to(tick, 1, {
y: 200,
ease: Anticipate.easeIn,
transformOrigin: '50% 50%'
}, '-=1')
.staggerTo([outline, outlineBg], 1, {
cycle: {
drawSVG: ['41.9% 57.9%', '50% 50%']
},
ease: Power2.easeInOut
}, 0.1, '-=1')
.set(outline, {
stroke: 'transparent'
})
.set(baseStart, {
stroke: '#607D8B'
})
.to(baseStart, 1, {
morphSVG: {
shape: baseStartPath
},
ease: Elastic.easeOut.config(1, 0.4)
})
tl.stop(0)
//ScrubGSAPTimeline(tl);
hit.onclick = function() {
if (tl.time() == 0) {
tl.play()
} else {
tl.seek(0)
}
}
tl.timeScale(1.52);
//ScrubGSAPTimeline(tl)
//# sourceURL=pen.js
</script>
</body></html>
