Site redesign blog post

fifth.js

var pathString = '';
var x = 0; // placeholder for where the drawing is up to
var y = 0;
var x1, x2, x3, x4; // co-ordinates for the four points of the diamond
var y1, y2, y3, y4;

for (var i = 0; i < 30; i++) { // grid of 30x30 diamonds
  for (var j = 0; j < 30; j++) {
    x1 = x + 0;
    y1 = y + 15;

    x2 = x + 5;
    y2 = y + 0;

    x3 = x + 10;
    y3 = y + 15;

    x4 = x + 5;
    y4 = y + 30;

    x = x + 10;

    pathString = 'M ' + x1 + ',' + y1 + " L " + x2 + "," + y2 + " L " + x3 + "," + y3 + " L " + x4 + "," + y4 + " Z";
    
    var random = Math.random();
    
    if (random > 0.9) { // randomly apply some basic styling to show the different diamonds
      svg.append("path")
      .style("fill", "#5AF")
      .attr("stroke", "none")
      .attr("d", pathString);
    }
    else if (random > 0.5) {
      svg.append("path")
      .style("fill", "#246")
      .attr("stroke", "none")
      .attr("d", pathString);
    }
    else {
      svg.append("path")
      .style("fill", "#369")
      .attr("stroke", "none")
      .attr("d", pathString);
    }
  }
  y = y + 30;
  x = 0;
}

first.js

var triangle = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
triangle.setAttribute("stroke", Color.WHITE);
triangle.setAttribute("strokeWidth", "1");
triangle.setAttribute("points", "40,0 0,0 0,40");

fourth.js

svg.append("path")
.style("stroke", "black")
.style("fill", "none")
.attr("d", "M 0,15 L 5,0 L 10,15 L 5,30 Z");

second.js

$('#svg').append("<polygon points=\"0,15 5,0 10,15 5,30\"></polygon>");

third.js

$("svg").html($("svg").html());