Morning all, this is a new post in my series covering the development of an SVG Circle of Fifths component for React. That component has just recently reached the point where I feel comfortable telling people to try it out and is MIT licensed - if you think you could use a nice looking Circle of Fifths in some musical application you're working on, check it out.
More than happy to accept feedback, PRs or issues on the repo, I've got a lot more stuff planned but the basic usability is there, I think!
I'll also note you stick to natural/# for diminished. For minor, you transition between #/b boundary at D#m/Bbm but for major you transition at the B/Gb boundary. Personally I'd go with F# and be consistent between major and minor.
Ah yeah, dammit. I've already fixed the Gb diminished chord in the current source, but I was taking screenshots from old commits. I will definitely fix the transition with minor/major though, that's awkward. Thanks for the feedback!
I may eventually switch over to Tonal for the key data, right now it's just hardcoded.
Edit: just published v0.1.3, which fixes this issue. Long term, might be nice to display both sharp and flat on that key, but at least it's consistent for now. Thanks again!
3 comments
[ 3.1 ms ] story [ 24.4 ms ] threadMore than happy to accept feedback, PRs or issues on the repo, I've got a lot more stuff planned but the basic usability is there, I think!
https://github.com/epiccoleman/react-circle-of-fifths
I'll also note you stick to natural/# for diminished. For minor, you transition between #/b boundary at D#m/Bbm but for major you transition at the B/Gb boundary. Personally I'd go with F# and be consistent between major and minor.
I may eventually switch over to Tonal for the key data, right now it's just hardcoded.
Edit: just published v0.1.3, which fixes this issue. Long term, might be nice to display both sharp and flat on that key, but at least it's consistent for now. Thanks again!