D3.js isomophic pattern

by piepkrak

HTML

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

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}

JavaScript

var svg = d3.select('svg')
	.attr({
      "width": "600",
      "height": "400"
  });
var draw = SVG(svg[0][0]);
var rh = 200, rw = 50, ang=135;

var pattern = draw.pattern(50, 50, function(add) {
  add.rect(50,49)
  add.rect(50,1).fill('red').move(0,49)
});

var rect3d = svg.append('g')
    .attr("transform", "translate (0,"+rh/2+")")
;

rect3d.append("rect")
	.attr({ fill: pattern })
	.attr("class", "forward")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", rw)
  .attr("height", rh)
  ;
  
  rect3d.append("rect")
  .attr({ fill: "red" })
	.attr("class", "top")
  .attr("x", 0)
  .attr("y", -rw/2)
  .attr("width", rw)
  .attr("height", rw/2)
  .attr ("transform", "translate (0,0) skewX("+ang+")")
  ;
  
  rect3d.append("rect")
  .attr({ fill: pattern })
	.attr("class", "side")
  .attr("x", rw)
  .attr("y", rw)
  .attr("width", rw/2)
  .attr("height", rh)
  .attr ("transform", "translate (0,0) skewY("+ang+")")
  ;