Built with blockbuilder.org
forked from SpaceActuary's block: SVG Stripes
license: mit |
Built with blockbuilder.org
forked from SpaceActuary's block: SVG Stripes
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
svg { width:100%; height: 100% } | |
rect, circle { stroke-width: 10; } | |
</style> | |
</head> | |
<body> | |
<script> | |
// Feel free to change or delete any of the code you see! | |
var svg = d3.select("body").append("svg"), | |
defs = svg.append("defs") | |
size = 150 | |
rects = [1, 3, 4, 6], | |
circles = [7, 8, 9, 10]; | |
var color = d3.scaleOrdinal(d3.schemeCategory10); | |
var img_id = function(d){ return "img_" + d; } | |
var img_url = function(d){ return "url(#img_" + d + ")"; } | |
// create an svg element | |
var imgPattern = defs.selectAll("pattern").data(d3.merge([rects, circles])) | |
.enter() | |
.append("pattern") | |
.attr("id", img_id) | |
.attr("width", 1) | |
.attr("height", 1) | |
.attr("patternUnits", "objectBoundingBox") | |
.append("image") | |
.attr("x", 0) | |
.attr("y", 0) | |
.attr("width", size) | |
.attr("height", size) | |
.attr("xlink:href", function(d) { | |
return "http://lorempixel.com/" + size + "/" + size + "/people/" + d; | |
}) | |
svg.selectAll("rect").data(rects) | |
.enter().append("rect") | |
.attr("x", function(d, i){ return i * size * 1.5 + (0.5 * size)}) | |
.attr("y", function(d, i){ return i % 2 ? 325 : 100; }) | |
.attr("height", size) | |
.attr("width", size) | |
.style("fill", img_url) | |
.style("stroke", color) | |
svg.selectAll("circle").data(circles) | |
.enter().append("circle") | |
.attr("cx", function(d, i){ return i * size * 1.5 + size; }) | |
.attr("cy", function(d, i){ return i % 2 ? 175 : 400; }) | |
.attr("r", size / 2) | |
.style("fill", img_url) | |
.style("stroke", color) | |
</script> | |
</body> |