Thursday, March 23, 2017

Musical notes images

For my app Music-notes, I was searching for images of musical notes so I can use them in my flash card feature. Unfortunately, I couldn't found one, hence I spent time to generate  programatically.

TL;DR


Feel free to use the assets the way you want (MIT)

* Download SVG + PNG

Note: PNG shared above are 3x scaled version of SVG.





My workflow to generate SVG


I knew about VexFlow, as there is always I've some idea which requires this library. As usual I overshoot my estimate only to learn, it doesn't have an option generate notes to a given height & width. 

So, I forked their sample to generate each notes. And I resized them using svg editor, I set the height to `130` as it seems vertically center to me.

Also used Gapplin to scale and export them to PNG.