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> | |
| .circleStyle { | |
| stroke: #000; | |
| stroke-width: 0.01; | |
| fill: none; | |
| } | |
| </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="moireAnimation1" viewBox="-4 -4 8 8"> | |
| </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 = 5, | |
| depthBigCircles = 40, | |
| zoomFactor = 1; | |
| function createMoireCircles() { | |
| var allCircle = d3.select("svg#moireAnimation1") | |
| .append("g") | |
| .attr("id", "all_circle"); | |
| for (var i=0; i < numberBigCircles; i++) { | |
| var moireCircle = allCircle | |
| .append("g") | |
| .attr("id", "moire_circle" + i); | |
| for (var j=0; j<depthBigCircles; j++) { | |
| moireCircle | |
| .append("circle") | |
| .attr("class", "circleStyle") | |
| .attr("cx", "0") | |
| .attr("cy", "0") | |
| .attr("r", (j/depthBigCircles * 2 * zoomFactor)); | |
| } | |
| } | |
| } | |
| function animateMoireCircles() { | |
| t1.staggerFrom("#moire_circle0 circle", 3, {x:-2.5, autoAlpha:0, scale:0, transformOrigin:"50% 50%"}, 0.1, 0) | |
| .staggerFrom("#moire_circle1 circle", 3, {x:2.5, autoAlpha:0, scale:0, transformOrigin:"50% 50%"}, 0.1, 0) | |
| .staggerFrom("#moire_circle2 circle", 3, {y:2.5, autoAlpha:0, scale:0, transformOrigin:"50% 50%"}, 0.1, 0) | |
| .staggerFrom("#moire_circle3 circle", 3, {y:-2.5, autoAlpha:0, scale:0, transformOrigin:"50% 50%"}, 0.1, 0) | |
| .staggerFrom("#moire_circle4 circle", 3, {autoAlpha:0, scale:0, transformOrigin:"50% 50%"}, 0.1, 0); | |
| t1.to("#moire_circle0", 5, {x:-1.5, ease: Power1.easeInOut, repeat:-1, yoyo:true}, 3 + depthBigCircles * 0.1) | |
| .to("#moire_circle1", 5, {x:1.5, ease: Power1.easeInOut, repeat:-1, yoyo:true}, 3 + depthBigCircles * 0.1) | |
| .to("#moire_circle2", 5, {y:1.5, ease: Power1.easeInOut, repeat:-1, yoyo:true}, 3 + depthBigCircles * 0.1) | |
| .to("#moire_circle3", 5, {y:-1.5, ease: Power1.easeInOut, repeat:-1, yoyo:true}, 3 + depthBigCircles * 0.1); | |
| } | |
| createMoireCircles(); | |
| animateMoireCircles(); | |
| </script> | |
| </body> | |
| </html> |
