Cube patterns overlay
Using the cube pattern function twice to create a more interesting pattern.
var r = new Rune({ container: "#canvas", width: 800, height: 600 }); drawPattern(0, 0, 900, 700, 10); drawPattern(0, 0, 900, 700, 30); function drawPattern(startX, startY, width, height, size) { var parent = r.group(startX, startY); var a = size; var b = size * 2; var c = size * 3; var d = size * 4; for (var y = 0; y <= height; y += c) { for (var x = 0; x <= width; x += d) { var centerX = x; var centerY = y; // shift every other row to the left to // fit inside the row above. if((y/c) % 2 == 0) { centerX -= b; } r.polygon(centerX, centerY, parent) .fill(5, 133, 170) .lineTo(0, -c) .lineTo(b, -b) .lineTo(0, -a) .lineTo(-b, -b); r.polygon(centerX, centerY, parent) .fill(1, 40, 76) .lineTo(-b, -b) .lineTo(0, -a) .lineTo(0, a) .lineTo(-b, 0); } } } r.draw();
< Back to examples