Working with SVG Paths
Built with blockbuilder.org
Working with SVG Paths
Built with blockbuilder.org
<!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% } | |
</style> | |
</head> | |
<body> | |
<svg> | |
<path fill="none" stroke="#111" | |
d="M150,100 L229,100 L150,200 L150,150 L100,100"> | |
</path> | |
</svg> | |
<script> | |
// Feel free to change or delete any of the code you see! | |
var svg = d3.select("svg") | |
svg.append("path") | |
.attr({ | |
stroke: "#0f2399", | |
"stroke-width": 4, | |
fill:"#72e3dd", | |
d: "M" + [350,100] | |
+ "L" + [802,100] | |
+ "L" + [400,200] | |
+ "L" + [400,140] | |
+ "L" + [350,100] | |
}) | |
var data = [{x: 150, y:300}, {x: 801, y: 300}, {x: 400, y: 400}, | |
{x: 400, y: 354}, {x: 350, y: 381}]; | |
var lineGenerator = d3.svg.line() | |
.x(function(d) { return d.x }) | |
.y(function(d) { return d.y }) | |
.interpolate("linear-closed") | |
//.interpolate("cardinal-closed") | |
//.interpolate("basis") | |
console.log("line generated path", lineGenerator(data)) | |
svg.append("path") | |
.attr({ | |
stroke: "#f00", | |
"stroke-width": 2, | |
fill: "#cccccc", | |
d: lineGenerator(data) | |
}) | |
</script> | |
</body> |