SVG Piano

!piano

This lib includes the rendering logic for a correctly sized piano.

Demo

- React Demo
- Svelte Demo
- see demo folder for usage with plain js npm run start to run

Options

- range: lowest and highest key e.g. ['A1','C6']
- palette: array to customize color with format ['black', 'white']
- stroke: stroke color
- colorize: custom colorization e.g

``js
[
{ keys: ['E2', 'Bb2'], color: 'yellow' },
{ keys: ['C2', 'G2'], color: 'brown' }
];
`

- labels: add labels to certain keys:

`js
{
C2: '1',
Eb2: 'b3',
G2: '5',
Bb2: 'b7',
}
`

- visibleKeys: which pitches should be visible? e.g ['G','A','B','C','D','E','F#']`
- scaleX: changes scaling in x direction
- scaleY: changes scaling in y direction
- upperHeight: px height of upper area
- lowerHeight: px height of lower area
- strokeWidth: border width in px