<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>
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);
}
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)
This Pen doesn't use any external CSS resources.