console
'use strict';
window.onload = onLoad;
var easeInOutQuint = 'cubic-bezier(0.86, 0, 0.07, 1)';
var easeInQuart = 'cubic-bezier(0.895, 0.03, 0.685, 0.22)';
var APPEAR_COMPLETE = 2800;
function onLoad() {
var dashes = [
150,
330,
370,
410,
445,
470,
485,
490,
425
];
var markers = [
0,
1,
2,
3,
4,
5,
6,
7
];
var connectors = [
193,
151,
166,
85,
119,
215,
208
];
var loopAnims = dashes.map(function (offset, idx) {
var loop = document.querySelector('#loop' + idx);
var keyframes = generateLoopKeyframes(offset);
return new KeyframeEffect(loop, keyframes, {
duration: 8000,
delay: idx * 100
});
});
var loopGroup = new GroupEffect(loopAnims);
var markerAnims = markers.map(function (idx) {
var marker = document.querySelector('#marker' + idx);
var keyframes = generateMarkerKeyframes();
return new KeyframeEffect(marker, keyframes, {
duration: 1000,
delay: APPEAR_COMPLETE + idx * 400
});
});
var markerGroup = new GroupEffect(markerAnims);
var connectorAnims = connectors.map(function (dist, idx) {
var connector = document.querySelector('#connector' + idx);
var keyframes = generateConnectorKeyframes(dist);
return new KeyframeEffect(connector, keyframes, {
duration: 600,
delay: APPEAR_COMPLETE + idx * 450
});
});
var connectorGroup = new GroupEffect(connectorAnims);
var flash = document.querySelector('#flash');
var flashAnim = new KeyframeEffect(flash, flashKeyframes, {
duration: 75,
delay: 6500,
iterations: 3
});
var fingerPrintGroup = new GroupEffect([
loopGroup,
markerGroup,
connectorGroup,
flashAnim
]);
var container = document.querySelector('#container');
var containerAppearAnim = new KeyframeEffect(container, containerAppearKeyframes, { duration: 800 });
var containerDisappearAnim = new KeyframeEffect(container, containerDisappearKeyframes, { duration: 800 });
var animation = new SequenceEffect([
containerAppearAnim,
fingerPrintGroup,
containerDisappearAnim
]);
(function play() {
return document.timeline.play(animation).onfinish = play;
}());
}
function generateLoopKeyframes(dashoffset) {
return [
{
strokeDashoffset: 0,
opacity: 0,
offset: 0,
easing: easeInOutQuint
},
{
strokeDashoffset: 0,
opacity: 0,
offset: 0.01,
easing: easeInOutQuint
},
{
opacity: 1,
offset: 0.02,
easing: easeInOutQuint
},
{
strokeDashoffset: dashoffset,
offset: 0.25,
easing: easeInOutQuint
},
{
strokeDashoffset: dashoffset,
offset: 0.875,
easing: easeInQuart
},
{
opacity: 1,
offset: 0.99,
easing: easeInQuart
},
{
strokeDashoffset: 0,
opacity: 0,
offset: 1,
easing: easeInQuart
}
];
}
function generateMarkerKeyframes() {
return [
{
r: 0,
strokeWidth: 4
},
{ strokeWidth: 4 },
{
strokeWidth: 0,
r: 20
}
];
}
function generateConnectorKeyframes(dist) {
return [
{
strokeDashoffset: 75,
easing: easeInOutQuint
},
{
strokeDashoffset: -dist,
easing: easeInOutQuint
}
];
}
var flashKeyframes = [
{ opacity: 0 },
{ opacity: 1 },
{ opacity: 0 }
];
var containerAppearKeyframes = [
{
r: 0,
easing: easeInOutQuint
},
{
r: 158,
easing: easeInOutQuint
}
];
var containerDisappearKeyframes = [
{
r: 158,
easing: easeInOutQuint
},
{
r: 0,
easing: easeInOutQuint
}
];
<svg width="326px" height="325px"
viewBox="0 0 326 325"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="container"
cx="160" cy="158" r="158"
fill="#8cfddf" />
<g transform="translate(157.743592, 157.352285) rotate(-11.400000) translate(-157.743592, -157.352285) translate(23.743592, 23.852285)">
<g id="loops"
fill="none"
stroke="#fc2876"
stroke-linecap="round"
stroke-width="8">
<path id="loop0"
opacity="0"
stroke-dasharray="0 150 150"
d="M134.031936,133 L134.031936,133 C134.034111,133.333877 134.0352,133.668011 134.0352,134.0024 C134.0352,181.984758 111.602085,224.729939 76.6503753,252.319586 L76.6503753,252.319586" />
<path id="loop1"
opacity="0"
stroke-dasharray="0 330 54 20 0"
d="M94.2569871,259.395133 C128.913666,228.72779 150.7627,183.915376 150.7627,134.0029 C150.8164,124.7096 143.2894,117.1816 134.0024,117.1816 C124.986044,117.1816 117.62766,124.277227 117.3076,134.002 C117.3076,179.14191 94.9737823,219.068435 60.7516921,243.331031"
/>
<path id="loop2"
opacity="0"
stroke-dasharray="0 370 86 20 122 20 86 20 86"
d="M113.558275,264.191925 C146.879638,230.874021 167.4893,184.844109 167.4893,134.0029 C167.5283,115.479 152.5183,100.469 134.0023,100.469 C115.760736,100.469 100.92322,115.034207 100.5811,134 L100.5811,134 C100.5811,134.000667 100.5811,134.001333 100.5811,134.002 C100.5811,175.452002 79.0606588,211.878612 46.5822155,232.715715 L46.5822155,232.715715"
/>
<path id="loop3"
opacity="0"
stroke-dasharray="0 410 190 20 300"
d="M134.544728,266.234724 C165.473308,230.906991 184.2168,184.643027 184.2168,134.0039 C184.2422,106.249 161.7502,83.757 134.0022,83.757 C106.540513,83.757 84.2259401,105.787235 83.8535,134 L83.8535,134 C83.8535,134.0005 83.8535,134.001 83.8535,134.0015 C83.8535,170.956853 63.9005403,203.254445 34.1778448,220.705439 L34.1778448,220.705439" />
<path id="loop4"
opacity="0"
stroke-dasharray="0 445 40 20 330 20 0"
d="M157.204418,264.861412 C184.663549,228.444315 200.9434,183.124248 200.9434,134.0039 C200.9541,97.02 170.9801,67.044 134.0021,67.044 C97.3165849,67.044 67.5249474,96.5444819 67.127,134 L67.127,134 C67.127,134.000333 67.127,134.000667 67.127,134.001 C67.127,165.68211 49.532981,193.256713 23.5810329,207.484219 L23.5810329,207.484219 " />
<path id="loop5"
opacity="0"
stroke-dasharray="0 470 160 20 90 20 100"
d="M181.658883,258.868565 C204.470636,222.721897 217.6709,179.903697 217.6709,134.0039 C217.6709,133.669102 217.670198,133.334468 217.668795,133 C217.140217,87.2654619 179.886931,50.332 134.002,50.332 C88.0946689,50.332 50.8266645,87.298331 50.3994,134 L50.3994,134 C50.3994,134.000167 50.3994,134.000333 50.3994,134.0005 C50.3994,159.640749 35.9986381,181.920309 14.8422679,193.18937 L14.8422679,193.18937" />
<path id="loop6"
opacity="0"
stroke-dasharray="0 485 80 20 300 20 0"
d="M208.090697,245.995642 C224.926163,212.281614 234.3975,174.248544 234.3975,134.0044 C234.3975,133.669446 234.396844,133.334646 234.395533,133 C233.885454,78.0667232 189.136719,33.6205 134.0019,33.6205 C78.872583,33.6205 34.1255383,78.0546476 33.6719,134 L33.6719,134 C33.6719,134.000167 33.6719,134.000333 33.6719,134.0005 C33.6719,152.825989 23.3264308,169.237766 8.00929838,177.857974 L8.00929671,177.85797" />
<path id="loop7"
opacity="0"
stroke-dasharray="0 490 220 20 400 0"
d="M236.701867,220.918502 C246.050576,193.665519 251.125,164.427513 251.0918,134 C251.09126,69.3284596 198.671467,16.907 134.0018,16.907 C69.3301333,16.907 16.9073404,69.3284596 16.9068,134 L16.9068,134 C16.9453,145.158501 11.4993964,155.045954 3.11963966,161.148561" />
<path id="loop8"
opacity="0"
stroke-dasharray="0 425 110 20 180 20 0"
d="M267.8047,134 C267.803619,60.0979192 207.902033,0.195 134.0017,0.195 C60.0993667,0.195 0.194780789,60.0979192 0.193700015,134" />
</g>
<g id="markers"
stroke="#031C82"
stroke-width="4"
fill="none">
<circle id="marker0"
cx="70" cy="80" r="0" />
<circle id="marker1"
cx="200" cy="222" r="0" />
<circle id="marker2"
cx="59" cy="170" r="0" />
<circle id="marker3"
cx="198" cy="80" r="0" />
<circle id="marker4"
cx="134" cy="135" r="0" />
<circle id="marker5"
cx="144" cy="17" r="0" />
<circle id="marker6"
cx="120" cy="230" r="0" />
<circle id="marker7"
cx="204" cy="40" r="0" />
</g>
<g id="connectors"
stroke="#031C82"
stroke-width="2"
stroke-dasharray="75 250 0 0"
stroke-dashoffset="75"
fill="none">
<line id="connector0"
x1="70" y1="80"
x2="200" y2="222" />
<line id="connector1"
x1="200" y1="222"
x2="59" y2="170" />
<line id="connector2"
x1="59" y1="170"
x2="198" y2="80" />
<line id="connector3"
x1="198" y1="80"
x2="134" y2="135" />
<line id="connector4"
x1="134" y1="135"
x2="144" y2="17" />
<line id="connector5"
x1="144" y1="17"
x2="120" y2="230" />
<line id="connector6"
x1="120" y1="230"
x2="204" y2="40" />
</g>
</g>
<circle id="flash"
opacity="0"
cx="160" cy="158" r="158" />
</svg>
body {
align-items: center;
display: flex;
height: 100vh;
margin: 0;
}
svg { margin: 0 auto; }
#flash {
fill: #fff;
mix-blend-mode: overlay;
}