Built with blockbuilder.org
forked from SpaceActuary's block: SVG Stripes
forked from SpaceActuary's block: SVG Image Background
license: mit |
Built with blockbuilder.org
forked from SpaceActuary's block: SVG Stripes
forked from SpaceActuary's block: SVG Image Background
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<link href="https://fonts.googleapis.com/css?family=Bowlby+One" rel="stylesheet"> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
svg { width:100%; height: 100% } | |
rect, circle { stroke-width: 10; } | |
text { | |
font-family: 'Bowlby One', cursive; | |
fill: crimson; font-size: 130px; | |
stroke-width: 3px; stroke: #222; | |
text-shadow: 0px 1px 1px #ddd, | |
0px 2px 1px #d6d6d6, | |
0px 3px 1px #ccc, | |
0px 4px 1px #c5c5c5, | |
0px 5px 1px #c1c1c1, | |
0px 6px 1px #bbb, | |
0px 7px 1px #777, | |
0px 8px 3px rgba(100, 100, 100, 0.4), | |
0px 9px 5px rgba(100, 100, 100, 0.1), | |
0px 10px 7px rgba(100, 100, 100, 0.15), | |
0px 11px 9px rgba(100, 100, 100, 0.2), | |
0px 12px 11px rgba(100, 100, 100, 0.25), | |
0px 13px 15px rgba(100, 100, 100, 0.3); | |
} | |
</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") | |
w = 800, h = 600, | |
rects = [4], | |
circles = []; | |
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", w) | |
.attr("height", h) | |
.attr("xlink:href", function(d) { | |
return "http://lorempixel.com/" + w + "/" + h + "/city/" + d; | |
}) | |
svg.selectAll("rect").data(rects) | |
.enter().append("rect") | |
.attr("x", 50) | |
.attr("y", 50) | |
.attr("height", h) | |
.attr("width", w) | |
.style("fill", img_url) | |
.style("stroke", color) | |
svg.selectAll("circle").data(circles) | |
.enter().append("circle") | |
.attr("cx", function(d, i){ return i * w * 1.5 + w; }) | |
.attr("cy", function(d, i){ return i % 2 ? 175 : 400; }) | |
.attr("r", w / 2) | |
.style("fill", img_url) | |
.style("stroke", color) | |
function getPathData() { | |
return 'M 0 400 L 100 400 Q 300 400 400 350 Q 500 300 700 300 L 800 300'; | |
} | |
defs.append('path') | |
.attr("d", getPathData()) | |
.attr("id", 'curvedTextPath'); | |
svg.append("text").attr("transform", "translate(50, -70)") | |
.append("textPath") | |
.attr("xlink:href", "#curvedTextPath") | |
.text("SELECTED") | |
svg.append("text").attr("transform", "translate(70, 50)") | |
.append("textPath") | |
.attr("xlink:href", "#curvedTextPath") | |
.text("TEXT HERE") | |
</script> | |
</body> |