Skip to content

Instantly share code, notes, and snippets.

@SpaceActuary

SpaceActuary/README.md

Created May 13, 2016 16:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SpaceActuary/c21277d7228a38ef5617908168251bb2 to your computer and use it in GitHub Desktop.
Save SpaceActuary/c21277d7228a38ef5617908168251bb2 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Stripes
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
rect { fill: url(#stripes); }
</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");
// create an svg element
var stripes = defs.append("pattern")
.attr("id", "stripes")
.attr("width", 15)
.attr("height", 10)
.attr("patternUnits", "userSpaceOnUse")
.attr("patternTransform", "rotate(45 50 50)")
stripes.append("line")
.attr("stroke", "#d8d8d8")
.attr("stroke-width", 10)
.attr("y2", 20);
svg.append("rect")
.attr({
x: 50,
y: 50,
height: 400,
width: 800
})
console.log("you are now rocking with d3", d3);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment