Built with blockbuilder.org
Last active
July 4, 2017 15:26
-
-
Save curran/47c8249aabd003e5e1b3fc20d90ed649 to your computer and use it in GitHub Desktop.
[unlisted] Faces
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
| license: mit |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| svg { margin:10px; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| // Claimed by < your name here > | |
| (function (){ | |
| const svg = d3.select("body").append("svg") | |
| .attr('width', 100) | |
| .attr('height', 100) | |
| .style('border', '1px solid black'); | |
| const g = svg.append('g') | |
| .attr('transform', 'translate(50, 0)'); | |
| const eyeSpacing = 20; | |
| const eyeSize = 10; | |
| const eyeY = 25; | |
| const leftEye = g.append('circle') | |
| .attr('r', eyeSize) | |
| .attr('cx', -eyeSpacing) | |
| .attr('cy', eyeY); | |
| const rightEye = g.append('circle') | |
| .attr('r', eyeSize) | |
| .attr('cx', eyeSpacing) | |
| .attr('cy', eyeY); | |
| const eyebrowX1 = 10; | |
| const eyebrowX2 = 30; | |
| const eyebrowY1 = 10; | |
| const eyebrowY2 = 10; // Changing this will have great effect. | |
| const leftEyebrow = g.append('line') | |
| .attr('stroke', 'black') | |
| .attr('x1', eyebrowX1) | |
| .attr('x2', eyebrowX2) | |
| .attr('y1', eyebrowY1) | |
| .attr('y2', eyebrowY2); | |
| const rightEyebrow = g.append('line') | |
| .attr('stroke', 'black') | |
| .attr('x1', -eyebrowX1) | |
| .attr('x2', -eyebrowX2) | |
| .attr('y1', eyebrowY1) | |
| .attr('y2', eyebrowY2); | |
| const nose = g.append('circle') | |
| .attr('r', 8) | |
| .attr('cy', 50) | |
| .attr('fill', 'red'); | |
| const mouth = g.append('path') | |
| .attr('stroke', 'black') | |
| .attr('stroke-width', '3px') | |
| .attr('fill', 'none') | |
| .attr('d', d3.line() | |
| .x(function(d) { return d.x; }) | |
| .y(function(d) { return d.y; }) | |
| .curve(d3.curveCatmullRom.alpha(0.5)) | |
| ([ | |
| { x: -30, y: 70}, | |
| { x: 0, y: 80}, | |
| { x: 30, y: 70} | |
| ])) | |
| }()); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment