drawline
A Sass mixin that generate an inline SVG background images by drawing a line with an ASCII art syntax similar to grid-template-areas. Ideal for generating simple decorative shapes like chevrons or arrows.
Installation
npm i -D drawline
Usage
@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>`)
);
}
