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.


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

* Download SVG

Note: PNG version - 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.

Update - 2018-03-20:
  • Thank you AllanZp for updating me, Sorry it took me so long to respond.