https://github.com/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
https://github.com/mpopv/drawline

ascii-art css drawline mixins sass sass-mixins scss shape svg svg-icons

Last synced: 28 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mpopv/drawline
• Owner: mpopv
• License: mit
• Created: 2018-06-12T20:14:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-01-13T23:38:08.000Z (almost 5 years ago)
• Last Synced: 2024-10-16T17:03:53.119Z (3 months ago)
• Topics: ascii-art, css, drawline, mixins, sass, sass-mixins, scss, shape, svg, svg-icons
• Language: CSS
• Homepage:
• Size: 9.77 KB
• Stars: 1
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
![Three shapes generated by drawline: a thunderbolt, a greater-than sign, and a blocky backwards c](https://i.imgur.com/z2DrSZx.png)

# drawline

![npm](https://img.shields.io/npm/v/drawline) ![NPM](https://img.shields.io/npm/l/drawline) ![npm](https://img.shields.io/npm/dt/drawline) ![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/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

```scss

@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. `` vs ``)

  );

}

```