D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
curran
Full window
Github gist
[unlisted] Faces
Built with
blockbuilder.org
<!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>
https://d3js.org/d3.v4.min.js