- Gradient de couleur selon l'interpolation entre deux polygones.
L. Jégou, décembre 2016.
Created
December 28, 2016 13:18
-
-
Save ljegou/549cfc3642c050d7ee5889c0d66a4b4c to your computer and use it in GitHub Desktop.
Shaped gradient, animated fill
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script> | |
| </head> | |
| <body> | |
| <svg width="510" height="600"> | |
| </svg> | |
| <script type="text/javascript"> | |
| var svg = d3.select('svg'); | |
| // Formes d'arrivée et de départ pourles interpolations (deux jeux) | |
| var da0 = "m 155.91263,141.13951 c 0,0 58.90033,-39.26689 81.99849,-8.08436 23.09817,31.18253 40.42179,32.33743 34.64725,61.21014 -5.77454,28.87271 -24.25307,55.4356 -48.50615,55.4356 -24.25307,0 -78.53377,-21.94325 -78.53377,-38.11197 0,-25.40799 -24.25307,-45.04143 10.39418,-70.44941 z"; | |
| var da1 = "m 206.01004,185.54162 c 0,0 -2.35887,-1.12756 -1.92999,-3.3075 0.42889,-2.17994 2.35888,0.45103 3.35961,0.90205 1.00074,0.45102 1.85851,1.05238 2.64481,2.17994 0.78629,1.12755 1.07221,4.51023 -0.50037,4.20954 -2.05126,-1.15576 -2.24463,-2.69408 -3.57406,-3.98403 z"; | |
| var db0 = "m 151.88658,349.15062 c 0,0 4.68856,-55.63155 30.38189,-38.56882 25.69332,17.06273 33.57813,11.30391 45.93296,37.64341 12.35483,26.3395 18.17831,55.68117 7.96759,65.09307 -10.21071,9.41191 -44.30059,12.16174 -52.58074,-1.33346 -13.01164,-21.20677 -33.27679,-28.18188 -31.7017,-62.8342 z"; | |
| var db1 = "m 207.62311,362.43245 c 0,0 -2.35887,-1.12756 -1.92999,-3.3075 0.42889,-2.17994 2.35888,0.45103 3.35961,0.90205 1.00074,0.45102 1.85851,1.05238 2.64481,2.17994 0.78629,1.12755 1.07221,4.51023 -0.50037,4.20954 -2.05126,-1.15576 -2.24463,-2.69408 -3.57406,-3.98403 z"; | |
| var pathInterpolatorA = d3.interpolateString(da0, da1); | |
| var pathInterpolatorB = d3.interpolateString(db0, db1); | |
| var colorInterpolator = d3.interpolateRgb("white", "grey"); | |
| // Groupe général | |
| var forme = svg.append("svg:g") | |
| .attr("id", "forme"); | |
| // Dessin selon la valeur d'étape intermédaire (entre 0 et 1) | |
| function dessinA(step){ | |
| d3.select("g#forme") | |
| .append("path") | |
| .attr("d", pathInterpolatorA(step)) | |
| .style("fill", colorInterpolator(step)) | |
| .style("stroke", "none"); | |
| }; | |
| function dessinB(step) { | |
| d3.select("g#forme") | |
| .append("path") | |
| .attr("d", pathInterpolatorB(step)) | |
| .style("fill", colorInterpolator(step)) | |
| .style("stroke", "none"); | |
| }; | |
| //Boucle de dessin des courbes intermédiaires | |
| for (i=0; i<=20; i++){ | |
| dessinA(i/20); | |
| } | |
| for (i=0; i<=4; i++){ | |
| dessinB(i/4); | |
| } | |
| // Variation de la couleur | |
| function changeElementColor(d3Element, vitesse){ | |
| var e = d3.select(d3Element); | |
| var couleurOrigine = e.style("fill"); | |
| e | |
| .transition() | |
| .on("start", function repeat() { | |
| d3.active(this) | |
| .transition().duration(vitesse) | |
| .style("fill", "white") | |
| .transition().duration(vitesse) | |
| .style("fill", couleurOrigine) | |
| .on("end", repeat); | |
| }); | |
| } | |
| forme.selectAll("path").each(function(d) { | |
| changeElementColor(this, 1000); | |
| }); | |
| // Groupe des repères | |
| var reperes = svg.append("svg:g") | |
| .attr("id", "reperes"); | |
| // Superpositon des formes de départ et d'arrivée | |
| reperes | |
| .append("path") | |
| .attr("d", da0) | |
| .style("fill", "none") | |
| .style("stroke-width", "1px") | |
| .style("stroke", "#101010") | |
| .style("stroke-dasharray", "2,2"); | |
| reperes | |
| .append("path") | |
| .attr("d", da1) | |
| .style("fill", "none") | |
| .style("stroke-width", "1px") | |
| .style("stroke", "#101010") | |
| .style("stroke-dasharray", "2,2"); | |
| reperes | |
| .append("path") | |
| .attr("d", db0) | |
| .style("fill", "none") | |
| .style("stroke-width", "1px") | |
| .style("stroke", "#101010") | |
| .style("stroke-dasharray", "2,2"); | |
| reperes | |
| .append("path") | |
| .attr("d", db1) | |
| .style("fill", "none") | |
| .style("stroke-width", "1px") | |
| .style("stroke", "#101010") | |
| .style("stroke-dasharray", "2,2"); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment