|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<style> |
|
.arc_single { |
|
stroke: none; |
|
fill: #000; |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div style="text-align:center"> |
|
<svg xmlns="http://www.w3.org/2000/svg" width="500" xmlns:xlink="http://www.w3.org/1999/xlink" id="moireAnimation2" viewBox="-3 -3 6 6"> |
|
</svg> |
|
</div> |
|
|
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> |
|
<script> |
|
|
|
var t1 = new TimelineLite(); |
|
var numberBigCircles = 3, |
|
spikesBigCircles = 30; |
|
|
|
function createMoireSpikes() { |
|
for (var i=0; i<numberBigCircles; i++) { |
|
var moireArc = d3.select("svg#moireAnimation2") |
|
.append("g") |
|
.attr("id", "moire_arc_group" + i); |
|
|
|
for (var j=0; j<spikesBigCircles; j++) { |
|
var element = moireArc.append("g") |
|
.attr("transform", "rotate(" + (180/spikesBigCircles * j) + ")") |
|
|
|
element.append("path") |
|
.attr("class", "arc_single") |
|
.attr("d", "M 0,0 L 0,2 A 2,2 0 0,0 0.10467,1.99726 L -0.10467,-1.99726 A 2,2 0 0,1 0,-2 L 0,0"); |
|
} |
|
} |
|
} |
|
|
|
function animateMoireSpikes() { |
|
t1.set("#moire_arc_group1", {autoAlpha:0}) |
|
.set("#moire_arc_group2", {autoAlpha:0}); |
|
t1.staggerFrom("#moire_arc_group0 g", 1, {autoAlpha:0}, 0.05, 0); |
|
|
|
t1.set("#moire_arc_group1", {autoAlpha:1}, spikesBigCircles * 0.05 + 0.5) |
|
.set("#moire_arc_group2", {autoAlpha:1}, spikesBigCircles * 0.05 + 0.5); |
|
|
|
t1.to("#moire_arc_group0", 2.5, {x:-1, ease: Power1.easeInOut}, spikesBigCircles * 0.05 + 1) |
|
.to("#moire_arc_group1", 2.5, {x:1, ease: Power1.easeInOut}, spikesBigCircles * 0.05 + 1) |
|
.to("#moire_arc_group2", 2.5, {y:1, ease: Power1.easeInOut}, spikesBigCircles * 0.05 + 1); |
|
|
|
t1.to("#moire_arc_group0", 8, {x:1, transformOrigin:"50% 50%", ease: Power1.easeInOut, repeat:-1, yoyo:true}, spikesBigCircles * 0.05 + 4) |
|
.to("#moire_arc_group1", 8, {x:-1, transformOrigin:"50% 50%", ease: Power1.easeInOut, repeat:-1, yoyo:true}, spikesBigCircles * 0.05 + 4) |
|
.to("#moire_arc_group2", 8, {y:-1, transformOrigin:"50% 50%", ease: Power1.easeInOut, repeat:-1, yoyo:true}, spikesBigCircles * 0.05 + 4); |
|
|
|
t1.to("#moire_arc_group0", 8, {rotation:720, transformOrigin:"50% 50%", ease: Power1.easeInOut, repeat:-1, yoyo:true}, spikesBigCircles * 0.05 + 4) |
|
.to("#moire_arc_group1", 8, {rotation:720, transformOrigin:"50% 50%", ease: Power1.easeInOut, repeat:-1, yoyo:true}, spikesBigCircles * 0.05 + 4) |
|
.to("#moire_arc_group2", 8, {rotation:720, transformOrigin:"50% 50%", ease: Power1.easeInOut, repeat:-1, yoyo:true}, spikesBigCircles * 0.05 + 4); |
|
} |
|
|
|
createMoireSpikes(); |
|
animateMoireSpikes(); |
|
|
|
</script> |
|
</body> |
|
</html> |