Created
November 11, 2014 01:01
-
-
Save nachocab/28e2920e3fa8fbe1b453 to your computer and use it in GitHub Desktop.
criss cross pattern
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
<base target="_blank"> <!-- open all links on a new tab --> | |
<script src="bower_components/d3/d3.js"></script> | |
<style> | |
body{ | |
font-size: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
// tags: transform translate rotate skewX | |
var margin = {top: 40, bottom: 40, left: 40, right: 40}, | |
width = 200, | |
height = 200; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g") | |
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
svg.append("rect") | |
.attr("height", height) | |
.attr("width", width) | |
.attr("fill", "#EFF2F3"); | |
var data = d3.range(5); | |
var distance = 100, | |
angle = 45, | |
line_width = 1.5, | |
vertical_scale = 1, | |
horizontal_scale = 1; | |
// vertical | |
svg.selectAll(".lines") | |
.data(data) | |
.enter().append("path") | |
.attr("d", "M0,0V" + height) | |
.attr("transform", function(d,i){ return "translate(" + i * distance/2 + ",0)"}) | |
.style("fill", "none") | |
.style("stroke", "black") | |
.style("stroke-width", line_width); | |
// horizontal | |
svg.selectAll(".lines") | |
.data(data) | |
.enter().append("path") | |
.attr("d", "M0,0H" + width) | |
.attr("transform", function(d,i){ return "translate(0," + i * distance/2 +")"}) | |
.style("fill", "none") | |
.style("stroke", "black") | |
.style("stroke-width", line_width); | |
// up diagonal | |
svg.selectAll(".lines") | |
.data(data) | |
.enter().append("path") | |
.attr("d", "M0,0V" + Math.sqrt(height*height + width*width)) | |
.style("fill", "none") | |
.style("stroke", "black") | |
.style("stroke-width", line_width) | |
.attr("transform", function(d,i){ | |
var xi = i * distance; | |
return "translate(" + xi + ",0) rotate(" + angle +")"}); | |
// down diagonal | |
svg.selectAll(".lines") | |
.data(data) | |
.enter().append("path") | |
.attr("d", "M" + -distance + ",0V" + height * 10) | |
.style("fill", "none") | |
.style("stroke", "black") | |
.style("stroke-width", line_width) | |
.attr("transform", function(d,i){ | |
var xi = i * distance; | |
return "translate(" + xi + ",0) rotate(" + -angle +"," + -distance + "," + 0 +")"}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment