SVG stroke-dasharray

So I had written a d3/angular component to render a legned for a customer. Each legend cell was a simple stroked rectangle. They wanted to update the functionality so that some portions of the legend weren’t delineated by vertical separators. Rather than not stroking the individual cells and drawing separate lines it felt cleaner to update how undlineated cells should be stroked in place (not to mention it was a good opportunity to learn a bit more about stroke-dasharray). So I wrote a little pen using SASS to generate strokes for different sides of rectangles to sort out for myself the functionality.

See the Pen SVG stroke-dasharray boxes by Paul Adams (@adamspe) on CodePen.