Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <div id="wrapper"></div> <script> // Feel free to change or delete any of the code you see in this editor! var svg = d3.select("body").append("svg") .attr("width", "100%") .attr("height", "100%") svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "pink"); svg.append("rect") .attr("width", 50) .attr("height", 200) .attr("x", 490) .attr("y", 371) .attr("fill", "#21af36"); svg.append("circle") .attr("cy", 257) .attr("cx", 480) .attr("r", 60) .attr("fill", "#D4E35A"); svg.append("circle") .attr("cy", 340) .attr("cx", 480) .attr("r", 50) .attr("fill", "#e0d35b"); svg.append("circle") .attr("cy", 326) .attr("cx", 548) .attr("r", 50) .attr("fill", "#e0d35b"); svg.append("circle") .attr("cy", 250) .attr("cx", 579) .attr("r", 50) .attr("fill", "#e0d35b"); svg.append("circle") .attr("cy", 182) .attr("cx", 540) .attr("r", 50) .attr("fill", "#e0d35b"); svg.append("circle") .attr("cy", 173) .attr("cx", 466) .attr("r", 50) .attr("fill", "#e0d35b"); svg.append("circle") .attr("cy", 208) .attr("cx", 413) .attr("r", 50) .attr("fill", "#e0d35b"); svg.append("circle") .attr("cy", 293) .attr("cx", 413) .attr("r", 50) .attr("fill", "#e0d35b"); </script></body> https://d3js.org/d3.v4.min.js