One in a series of experiments on using D3 to generate a SVG and then the Greensock library to animate the SVG elements.
The idea was to test out how Moiré patterns are generated using various types of shapes.
For the whole series of experiments you can check out: A Study in Moiré Patterns
| <!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> |
