Skip to content

Instantly share code, notes, and snippets.

@johan
Forked from mbostock/.block
Created June 14, 2012 19:49
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save johan/2932504 to your computer and use it in GitHub Desktop.
SVG Path Cleaning
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
<svg viewBox="0 0 2000 1625.4" width="960" height="500">
<path fill="#52ade5" d="m2e3 192.42c-73.58 32.64-152.67 54.69-235.66 64.61 84.7-50.78 149.77-131.19 180.41-227.01-79.29 47.03-167.1 81.17-260.57 99.57-74.84-79.75-181.48-129.57-299.5-129.57-226.6 0-410.33 183.71-410.33 410.31 0 32.16 3.63 63.48 10.63 93.51-341.02-17.11-643.37-180.47-845.74-428.72-35.32 60.6-55.56 131.09-55.56 206.29 0 142.36 72.44 267.95 182.54 341.53-67.26-2.13-130.54-20.59-185.85-51.32-.04 1.71-.04 3.42-.04 5.16 0 198.8 141.44 364.64 329.15 402.34-34.43 9.38-70.68 14.4-108.1 14.4-26.44 0-52.15-2.58-77.2-7.36 52.22 163.01 203.75 281.65 383.3 284.95-140.43 110.06-317.35 175.66-509.6 175.66-33.12 0-65.79-1.95-97.88-5.74 181.59 116.42 397.27 184.36 628.99 184.36 754.73 0 1167.46-625.24 1167.46-1167.47 0-17.79-.41-35.48-1.2-53.08 80.18-57.86 149.74-130.12 204.75-212.41"/>
</svg>
<script>
var svg = d3.select("svg"),
path = svg.select("path"),
segments = path.node().pathSegList,
segment,
x = 0,
y = 0,
points = [],
n = segments.numberOfItems - 1, // drop Z
i = -1;
while (++i < n) {
segment = segments.getItem(i);
points.push(segment.pathSegType & 1
? [x += segment.x, y += segment.y]
: [x = segment.x, y = segment.y]);
}
svg.append("path")
.style("fill", "none")
.style("stroke", "red")
.style("stroke-width", "1.5px")
.attr("d", "M" + points[0] + "L" + points.slice(1).join(" "));
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment