mpopv / drawline

A Sass mixin that lets you generate inline SVG background images by drawing a line with an ASCII art syntax similar to grid-template-areas

drawline

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

Installation

npm i -D drawline
# or
yarn add -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>`)
  );
}

drawline's Issues

Single map arg

Merge with defaults via this or similar, to avoid requiring specific argument order.