Watercolor and paper texture effect without programming. Prototype - best run on Chrome (Safari 10 will support arrow functions and Firefox will hopefully become faster). A cleanup of what appeared here.
Bandlines, sparklines weren’t meant to operate as sketchy charts, it’s just an example for such styling with plot types that I like a lot.
Changes to the original:
bandline.jslink the new SVG filters to the bands, lines and extent box paths
Unlike these sketchy visuals, the watercolor and paper effects are done with filters:
A lesson learned is that what works with smooth paint doesn’t work as well with texture. The texturization of the bands reveal that the bands (
rect elements) don’t move in sync with the value lines. Time permitting a real solution should transform such elements if there’s a chance for rough fill style (patterns, sketchy and/or filter based texture). Also, in this specific solution all the bands are of a similar contour.