SVG 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

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

• labels: add labels to certain keys:

{
  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