johan · June 14, 2012 19:49
diff --git a/index.html b/index.html
 <!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>
	<!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>