D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
curran
Full window
Github gist
[unlisted] Menlo Park 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:3px; } </style> </head> <body> <script> // Claimed by Tarek (function (){ const svg = d3.select("body").append("svg") .attr('width', 100) .attr('height', 100) .style('border', '1px solid lawngreen'); const g = svg.append('g') .attr('transform', 'translate(50, 0)'); const eyeSpacing = 40; const eyeSize = 10; const eyeY = 25; const leftEye = g.append('circle') .attr('r', eyeSize) .attr('cx', -eyeSpacing) .attr('cy', eyeY); const rightEye = g.append('square') .attr('r', eyeSize) .attr('cx', eyeSpacing) .attr('cy', eyeY); const eyebrowX1 = 5; const eyebrowX2 = 60; 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} ])) }()); // Claimed by @enjalot (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', 30) .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: -40, y: 70}, { x: 8, y: 90}, { x: 30, y: 70} ])) }()); // Claimed by < senthil > (function (){ const svg = d3.select("body").append("svg") .attr('width', 100) .attr('height', 100) .style('border', '1px solid steelblue'); 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} ])) }()); // Claimed by < chris> (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} ])) }()); // 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 = 2 0; 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} ])) }()); // 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} ])) }()); // Claimed by < @micahstubbs > (function (){ const svg = d3.select("body").append("svg") .attr('width', 100) .attr('height', 100) .style('border', '1px solid goldenrod'); const g = svg.append('g') .attr('transform', 'translate(50, 0)'); const eyeSpacing = 0; const eyeSize = 20; 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} ])) }()); // Claimed byJonas (function (){ const svg = d3.select("body").append("svg") .attr('width', 150) .attr('height', 150) .style('border', '3px dashed #ff00ff'); 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*0.75) .attr('cx', -eyeSpacing) .attr('cy', eyeY-2); const rightEye = g.append('circle') .attr('r', eyeSize) .attr('cx', eyeSpacing) .attr('cy', eyeY); const eyebrowX1 = 10; const eyebrowX2 = 25; const eyebrowY1 = 25; 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', 12) .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.7)) ([ { x: -30, y: 70}, { x: 0, y: 80}, { x: 30, y: 70} ])) }()); // 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} ])) }()); // Claimed by < Bo > (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 = 10; const eyeSize = 10; const eyeY = 40; 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} ])) }()); // 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} ])) }()); // Claimed by vastur (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 = 13; const eyeY = 20; 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