xxxxxxxxxx<meta charset="utf-8"><style>.bird { stroke: grey; stroke-width: 2; fill: none;}</style><body> <svg id='main' width=960 height=500></svg></body><script src="//d3js.org/d3.v3.min.js"></script><script> /* Playing with d3 paths to make a scene of birds, the kind I used to draw in preschool /``\_/``\ */ // generate birds var birds = []; for(var i = 0; i < 50; i++) { var b = { x: Math.random() * 900, y: Math.random() * 500, size: Math.random() * 20 + 10 }; b.points = [ { x: b.x - b.size, y: b.y + (b.size * 0.05) }, // left wing tip { x: b.x - (b.size * 0.2), y: b.y - (b.size * 0.3) }, { x: b.x, y: b.y }, // center { x: b.x, y: b.y }, // duplicate center so point is sharp rather than round { x: b.x + (b.size * 0.2), y: b.y - (b.size * 0.3) }, { x: b.x + b.size, y: b.y + (b.size * 0.05) } // right wing tip ]; birds.push(b); } var lineFunction = d3.svg.line() .x(function(d) { return d.x }) .y(function(d) { return d.y }) .interpolate("basis"); // "curve" the wings var bird = d3.select("#main") .selectAll(".bird") .data(birds) .enter().append("path") .attr("class", "bird") .attr("d", function(d) { return lineFunction(d.points) });</script> https://d3js.org/d3.v3.min.js