Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/index.html Secret

Last active February 9, 2016 00:45
Show Gist options
  • Save mbostock/1322907 to your computer and use it in GitHub Desktop.
Save mbostock/1322907 to your computer and use it in GitHub Desktop.
Download ZIP
Poor Anti-Aliasing in SVG, #1
Raw
gistfile1.txt
1,920 contiguous opaque <tt>svg:rect</tt> elements, each .5-pixel wide. The text underneath the rects should not be visible.
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect {
fill: steelblue;
}
text {
font: 300 48px "Helvetica Neue";
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
svg.append("text")
.attr("x", 480)
.attr("y", 250)
.attr("text-anchor", "middle")
.attr("dy", ".35em")
.text("TEST FAILED");
svg.selectAll("rect")
.data(d3.range(1920))
.enter().append("rect")
.attr("x", function(d) { return d / 2; })
.attr("width", .5)
.attr("height", 500);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment