SVG Stripes

<!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% }
    rect { fill: url(#stripes); }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg"),
        defs = svg.append("defs");
    
    // create an svg element
    var stripes = defs.append("pattern")
        .attr("id", "stripes")
        .attr("width", 15)
        .attr("height", 10)
        .attr("patternUnits", "userSpaceOnUse")
        .attr("patternTransform", "rotate(45 50 50)")
    
    stripes.append("line")
        .attr("stroke", "#d8d8d8")
        .attr("stroke-width", 10)
        .attr("y2", 20);

svg.append("rect")
      .attr({
      	x: 50,
        y: 50,
      	height: 400,
        width: 800
    	})
    
    console.log("you are now rocking with d3", d3);
  </script>
</body>

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