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>`) 
  );
}