HTML / CSS / JS中的几何图案

Question

I have been challenge to recreate the image below using HTML/CSS/JS without using any img files. I was thinking that I could make the shapes with and CSS but I know this is probably the most stupid way to do it.

Do any of you have suggestions how to approach this? Maybe a HTML5 canvas? I see the pattern is made of two layers, one with triangles and the top layer with circles. How would I approach this if I wanted to have the triangles and the circles randomly generated?

Thanks

Answer 1

You could definitely achieve this by using the canvas element, but have you thought about using d3.js ?

D3.js is a library which is capable of manipulating documents based on data. Since all the elements within your picture have an exact position within a cartesian coordinate system you would just have to provide the data and then it would be fairly simple to append the elements to your document.

You could be very precise by using the exact coordinates of each element. Take a look at the snippet and i am sure you will get the idea. The D3 way of selecting an manipulating elements is very similar to what jQuery does, so if you are familiar with jQuery you will like D3js.

Hope this helps you out.

 var margin = { top: 50, right: 50, bottom: 50, left: 50}, w = 300 - margin.left - margin.right, h = 600 - margin.top - margin.bottom, circleRadii = 15, triData = [{x: 20, y: 30}, {x: 50, y: 120}, {x: 140, y: 160}], circleData = [{x: 10, y: 10}, {x: 40, y: 80}, {x: 160, y: 70}]; var svg = d3.select("body") .append("svg") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.left + margin.right) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var tri = svg.selectAll(".point") .data(triData) .enter().append("path") .attr("class", "point") .attr("stroke", "none") .attr("fill", "rgba(30,110,160,.5)") .attr("d", d3.svg.symbol().type("triangle-up").size(1024*2)) .attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; }); var circles = svg.selectAll("circle") .data(circleData) .enter() .append("circle"); var circleAttr = circles .attr("cx", function (d) { return dx; }) .attr("cy", function (d) { return dy; }) .attr("r", circleRadii) .style("fill", "rgba(10,100,0,.5)"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>