54 lines
1.4 KiB
JavaScript
54 lines
1.4 KiB
JavaScript
console.clear();
|
|
const circles = [...document.querySelectorAll('circle')];
|
|
const svg = document.querySelector('svg');
|
|
circles.sort((a, b) => {
|
|
const a_z = parseFloat(a.getAttribute('z'));
|
|
const b_z = parseFloat(b.getAttribute('z'));
|
|
return b_z - a_z;
|
|
});
|
|
let colors = ['#16F8C0','#00D4C0','#00AFB5','#008B9E','#22687E','#2F4858'];
|
|
|
|
circles.forEach((node, i) => {
|
|
svg.appendChild(node);
|
|
node.setAttribute('r', parseFloat(node.getAttribute('r')) * 1.5);
|
|
node.style.fill = colors[Math.floor(i / 70) % 6];
|
|
|
|
/* Rainbow colors */
|
|
// node.setAttribute('stroke', `hsl(${Math.floor(i / circles.length * 360)}deg, 70%, 60%)`);
|
|
// node.style.fill = `hsl(${Math.floor(i / circles.length * 360)}deg, 70%, 60%)`;
|
|
});
|
|
|
|
const tween = gsap.timeline({
|
|
repeat: -1
|
|
});
|
|
|
|
tween.fromTo('circle',{
|
|
strokeDasharray: (i, node) => {
|
|
return node.getTotalLength();
|
|
},
|
|
strokeDashoffset: (i, node) => {
|
|
return node.getTotalLength();
|
|
},
|
|
transformOrigin: 'center',
|
|
rotation: Math.random() * 360,
|
|
scale: 0
|
|
}, {
|
|
scale: 1,
|
|
rotation: Math.random() * 360,
|
|
strokeDashoffset: 0,
|
|
stagger: 0.004,
|
|
duration: 'random(0.8, 2.5)',
|
|
ease: 'elastic.out(1,0.3)'
|
|
});
|
|
tween.to('circle', {
|
|
cx: () => {
|
|
return `+=${(Math.random() - 0.5) * 500}`
|
|
},
|
|
cy: () => {
|
|
return `+=${(Math.random() - 0.5) * 500}`
|
|
},
|
|
scale: 0,
|
|
opacity: 0,
|
|
duration: 'random(0.4, 1.5)',
|
|
stagger: 0.001
|
|
}); |