While looking to add hash to maps areas I came out with this "svg patterns & d3js" gist.
Last active
August 29, 2015 14:14
-
-
Save hugolpz/98cef20c4d7cb05c7b26 to your computer and use it in GitHub Desktop.
SVG Pattern & D3js for diagonal hash
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 lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title></title> | |
<link rel="stylesheet" href="style.css"> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
</head> | |
<body> | |
<h4>Via svg, pattern, and <a href="http://jsfiddle.net/jwrmwxzt/7/">path</a></h4> | |
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
<defs> | |
<pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse"> | |
<path fill="black" d="M5,0 10,10 0,10 Z" /> | |
</pattern> | |
</defs> | |
<circle cx="60" cy="60" r="50" fill="url(#Triangle)" /> | |
</svg> | |
<h4>Via svg, pattern, and rectangles</h4> | |
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
<defs> | |
<pattern id="hash4_4" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> | |
<rect width="4" height="8" transform="translate(0,0)" fill="orange"></rect> | |
</pattern> | |
</defs> | |
<circle cx="60" cy="60" r="50" fill="url(#hash4_4)" /> | |
</svg> | |
<h4>Via svg, pattern, and d3</h4> | |
</body> | |
<script> | |
// SVG injection: | |
var svg = d3.select("body").append("svg").attr("id", "d3svg") | |
.attr("width", 120) | |
.attr("height", 120); | |
//Pattern injection | |
var pattern = svg.append("defs") | |
.append("pattern") | |
.attr({ id:"hash4_4", width:"8", height:"8", patternUnits:"userSpaceOnUse", patternTransform:"rotate(60)"}) | |
.append("rect") | |
.attr({ width:"4", height:"8", transform:"translate(0,0)", fill:"#88AAEE" }); | |
//Shape design | |
svg.append("g").attr("id","shape") | |
.append("circle") | |
.attr({cx:"60",cy:"60",r:"50", fill:"url(#hash4_4)" }) | |
</script> | |
</html> |
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
svg { border : 1px solid #88AAEE; background-color: #FEE; } | |
h4 { color: #777;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment