SVG based library which illustrates finger positions of a guitar chord on a fretboard.
based on guitar-js (Fomin Sergey)
$ npm install --save chord-illustratorillustrates B minor
// import chord-illustrator & xmldom
const ChordIllustrator = require('chord-illustrator');
const DOMParser = require('xmldom').DOMParser;
// prepare html objects
// https://www.w3.org/DOM/
const document = new DOMParser().parseFromString('<html></html>');
//
const ci = new ChordIllustrator(document.createElement('div'))
const svg = ci.make({
name: 'Bm',
mutedStrings: ['yes'],
fingering: [
{
fret: 1,
barre: {from: 1, to: 5}
},
{fret: 2, string: 2},
{fret: 3, string: 3},
{fret: 3, string: 4}
]
});
console.log('HTML output', svg.toString());XML generated
<svg height="440" viewbox="0 0 215 133" xmlns="http://www.w3.org/2000/svg">
<rect x="25" y="27" height="100" width="180" stroke="rgb(0, 0, 0)" stroke-width="1" fill="rgb(255, 255, 255)"/>
<line x1="85" y1="27" x2="85" y2="127" stroke="rgb(0, 0, 0)" stroke-width="1"/>
<line x1="145" y1="27" x2="145" y2="127" stroke="rgb(0, 0, 0)" stroke-width="1"/>
<line x1="205" y1="27" x2="205" y2="127" stroke="rgb(0, 0, 0)" stroke-width="1"/>
<line x1="25" y1="47" x2="205" y2="47" stroke="rgb(0, 0, 0)" stroke-width="1"/>
<line x1="25" y1="67" x2="205" y2="67" stroke="rgb(0, 0, 0)" stroke-width="1"/>
<line x1="25" y1="87" x2="205" y2="87" stroke="rgb(0, 0, 0)" stroke-width="1"/>
<line x1="25" y1="107" x2="205" y2="107" stroke="rgb(0, 0, 0)" stroke-width="1"/>
<line x1="25" y1="127" x2="205" y2="127" stroke="rgb(0, 0, 0)" stroke-width="1"/>
<circle cx="15" cy="27" r="5" stroke="rgb(0, 0, 0)" stroke-width="1" fill="rgb(255, 255, 255)"/>
<circle cx="15" cy="47" r="5" stroke="rgb(0, 0, 0)" stroke-width="1" fill="rgb(255, 255, 255)"/>
<circle cx="15" cy="67" r="5" stroke="rgb(0, 0, 0)" stroke-width="1" fill="rgb(255, 255, 255)"/>
<circle cx="15" cy="87" r="5" stroke="rgb(0, 0, 0)" stroke-width="1" fill="rgb(255, 255, 255)"/>
<circle cx="15" cy="107" r="5" stroke="rgb(0, 0, 0)" stroke-width="1" fill="rgb(255, 255, 255)"/>
<line x1="10" y1="122" x2="20" y2="132" stroke="rgb(0, 0, 0)" stroke-width="1"/>
<line x1="20" y1="122" x2="10" y2="132" stroke="rgb(0, 0, 0)" stroke-width="1"/>
<circle cx="55" cy="27" r="5" stroke="rgb(0, 0, 0)" stroke-width="1" fill="rgb(0, 0, 0)"/>
<circle cx="55" cy="107" r="5" stroke="rgb(0, 0, 0)" stroke-width="1" fill="rgb(0, 0, 0)"/>
<rect x="50" y="27" height="80" width="10" stroke="rgb(0, 0, 0)" stroke-width="1" fill="rgb(0, 0, 0)"/>
<circle cx="115" cy="47" r="5" stroke="rgb(0, 0, 0)" stroke-width="1" fill="rgb(0, 0, 0)"/>
<circle cx="175" cy="67" r="5" stroke="rgb(0, 0, 0)" stroke-width="1" fill="rgb(0, 0, 0)"/>
<circle cx="175" cy="87" r="5" stroke="rgb(0, 0, 0)" stroke-width="1" fill="rgb(0, 0, 0)"/>
</svg>in browser
v1.1.0
- moved width & height to viewBox attribute for svg container, which allows the fields to be used as input
- added/changed new methods: setContainer, setHeight, make
#Docs
- set the container where output will be generated.
chord name/title
from E4 to E6
array of max 6 items filled with ”yes/no”
if not specified, value will default to “open”
Apache-2.0 © Alexandru Calin
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent