Get a striped background using D3 without gradients

Ready for stripes? Usually, we have two options for a striped background on a website: define a gradient in CSS; or repeat a bitmap image tile. Both have problems. CSS gradients, which use color stops immediately next to one another to produce the effect without gradation, use awkward syntax, have limited support for combined stripes, and (presently) produce rough edges at the colors' boundaries because of sub-pixel antialiasing. Serrated or jagged color boundaries are especially visible on non-Retina-scale monitors. And a tiled raster image has all the problems of a bitmap: A gif has no capacity for adjustment outside the image editor that created it; designing a seamless tile takes special consideration for the image's edges; and the pixel density of the user's monitor affects the tile's resolution. A third option for building stripes is a vector pattern employing D3. We will attempt the third option. Start a background First things first First things are first. Start by adding a con