FrettedChord

Description

Generates a fretted chord svg for instruments like guitar and ukulele.

Try it out and generate code: FrettedChord Creator

props

• class
• id
• name - name of chord
• notes - list of the positioning of the notes required for the chord
• size - total size of chord square in pixels, defaults to 150
• strings - total number of strings for the instrument

example

<script lang="ts">
    import { FrettedChord } from "drab";
</script>

<FrettedChord
    class="font-mono"
    name="D"
    notes={[
        {
            finger: 0,
            string: 4,
            fret: 0,
        },
        {
            finger: 1,
            string: 3,
            fret: 2,
        },
        {
            finger: 2,
            string: 1,
            fret: 2,
        },
        {
            finger: 3,
            string: 2,
            fret: 3,
        },
    ]}
/>