Experimenting with Branding/Logo choices for Data Science for Social Good in Germany.
-
-
Save kirel/2c5c587b9e9c049b43bb to your computer and use it in GitHub Desktop.
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"> | |
| <link rel="stylesheet" type="text/css" href="styles.css"> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var vertices = d3.range(100).map(function(d) { | |
| return [Math.random() * width, Math.random() * height]; | |
| }); | |
| var yCorrect = 40; | |
| var heart = [[494,364],[383,196],[574,165],[433,300]].map(function(p) {return [p[0],p[1]-yCorrect]; }); | |
| var bg = [[271,87],[494,70],[680,77],[730,185],[620,456],[366,487],[260,220],[303,374],[174,332],[168,142],[302,576],[707,570],[849,258]].map(function(p) {return [p[0],p[1]-yCorrect]; });; | |
| var points = heart.concat(bg); | |
| var xA = function(p) { return p[0]; } | |
| var yA = function(p) { return p[1]; } | |
| var voronoi = d3.geom.voronoi() | |
| .clipExtent([[0, 0], [width, height]]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var bgGroup = svg.append("g").attr("class","bg"); | |
| var heartGroup = svg.append("g").attr("class","heart"); | |
| var bgPath = bgGroup.selectAll("path"); | |
| var heartPath = heartGroup.selectAll("path"); | |
| redraw(); | |
| function redraw() { | |
| var polys = voronoi(points); | |
| bgPath = bgPath | |
| .data(polys.slice(heart.length,bg.length), polygon); | |
| heartPath = heartPath | |
| .data(polys.slice(0,heart.length), polygon); | |
| bgPath.exit().remove(); | |
| heartPath.exit().remove(); | |
| bgPath.enter().append("path") | |
| .attr("class", function(d, i) { return "q" + (i % 9) + "-9"; }) | |
| .attr("d", polygon); | |
| heartPath.enter().append("path") | |
| .attr("class", function(d, i) { return "q" + (i % 9) + "-9"; }) | |
| .attr("d", polygon); | |
| heartPath.order(); | |
| bgPath.order(); | |
| heartGroup.selectAll("circle") | |
| .data(heart) | |
| .enter().append("circle") | |
| .attr("transform", function(d) { return "translate(" + d + ")"; }) | |
| .attr("r", 1.5); | |
| bgGroup.selectAll("circle") | |
| .data(bg) | |
| .enter().append("circle") | |
| .attr("transform", function(d) { return "translate(" + d + ")"; }) | |
| .attr("r", 1.5); | |
| } | |
| function polygon(d) { | |
| return "M" + d.join("L") + "Z"; | |
| } | |
| </script> |
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
| path { | |
| stroke: #fff; | |
| } | |
| circle { | |
| fill: #000; | |
| pointer-events: none; | |
| } | |
| .q0-9 { fill: rgb(197,27,125); } | |
| .q1-9 { fill: rgb(222,119,174); } | |
| .q2-9 { fill: rgb(241,182,218); } | |
| .q3-9 { fill: rgb(253,224,239); } | |
| .q4-9 { fill: rgb(247,247,247); } | |
| .q5-9 { fill: rgb(230,245,208); } | |
| .q6-9 { fill: rgb(184,225,134); } | |
| .q7-9 { fill: rgb(127,188,65); } | |
| .q8-9 { fill: rgb(77,146,33); } | |
| .heart path { fill: red; !important } | |
| @-webkit-keyframes beat { | |
| 0% {transform: scale(1);} | |
| 22% {transform: scale(1);} | |
| 24% {transform: scale(1.05);} | |
| 48% {transform: scale(1);} | |
| 50% {transform: scale(1.05);} | |
| 74% {transform: scale(1);} | |
| 100% {transform: scale(1);} | |
| } | |
| @-moz-keyframes beat { | |
| 0% {transform: scale(1);} | |
| 22% {transform: scale(1);} | |
| 24% {transform: scale(1.05);} | |
| 48% {transform: scale(1);} | |
| 50% {transform: scale(1.05);} | |
| 74% {transform: scale(1);} | |
| 100% {transform: scale(1);} | |
| } | |
| @keyframes beat { | |
| 0% {transform: scale(1);} | |
| 22% {transform: scale(1);} | |
| 24% {transform: scale(1.05);} | |
| 48% {transform: scale(1);} | |
| 50% {transform: scale(1.05);} | |
| 74% {transform: scale(1);} | |
| 100% {transform: scale(1);} | |
| } | |
| .heart { | |
| transform-origin: center center; | |
| -webkit-animation: beat 1.65s ease-in infinite; | |
| -moz-animation: beat 1.65s ease-in infinite; | |
| -o-animation: beat 1.65s ease-in infinite; | |
| animation: beat 1.65s ease-in infinite; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment