star attempt 2

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
     var svg = d3.select("body").append("svg")
     svg.append("polygon")       // attach a polygon
    .style("stroke", "blue")  // colour the line
    .style("fill", "blue")     // remove any fill colour
    .attr("points", "20,20, 40 ,20, 30,1")   
      svg.append("polygon")       // attach a polygon
    .style("stroke", "blue")  // colour the line
    .style("fill", "blue")     // remove any fill colour
    .attr("points", "20,20, 20 ,40, 10,30")   
	   svg.append("polygon")       // attach a polygon
    .style("stroke", "blue")  // colour the line
    .style("fill", "blue")     // remove any fill colour
    .attr("points", "20,20, 20 ,40, 1,30")  
      svg.append("polygon")       // attach a polygon
    .style("stroke", "blue")  // colour the line
    .style("fill", "blue")     // remove any fill colour
    .attr("points", "20,20, 20 ,45, 1,60")  
       svg.append("polygon")       // attach a polygon
    .style("stroke", "blue")  // colour the line
    .style("fill", "blue")     // remove any fill colour
    .attr("points", "40,20, 40 ,40, 60,30") 
       svg.append("polygon")       // attach a polygon
    .style("stroke", "blue")  // colour the line
    .style("fill", "blue")     // remove any fill colour
    .attr("points", "40,20, 40,40, 70,60 ") 
      svg.append("rect")
      .attr({x: 20, y: 20, width: 20, height: 22})
      .style({ fill: "blue"})  
       
     
     
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js