A Sass mixin that generates inline SVG background images by drawing a line with an ASCII art syntax. Ideal for generating simple decorative shapes like chevrons or arrows.
Play with some examples: https://codepen.io/mpopv/pen/wXpgaL
npm i -D drawline
# or
yarn add -D drawline
@import '../../node_modules/drawline/drawline';
// A right-facing chevron
.right-chevron {
background-image: drawline(
('-1---' // A Sass list of ASCII art strings
'-----'
'---2-'
'-----'
'-3---'),
#000, // The stroke color of the line
10, // The stroke-width of the line (as a percent of the image width, because viewBox is `0 0 100 100`)
miter, // The stroke-linejoin of the line
square, // The stroke-linecap of the line
false // Whether the last point should connect to the first (i.e. `<polyline>` vs `<polygon>`)
);
}