Before attending the An Event Apart 2017 conference in Chicago last month, I didn't know much at all about SVGs, or even what an arpeggiator was. One of the speakers, Chris Coyier, gave a fascinating talk about the possibilities of the vector image format. And some of the examples he used included things like logo animation, shape morphing, spinners, art.
He even had a music example - an arpeggiator created on CodePen by Jake Albaugh.
If you're interested, there's a great article about arpeggiators here. In short, an arpeggiator is commonly found on a synthesizer, and 'provides synth players with an easy way of playing complex synth parts via simple chords'.
Besides being built entirely with SVG, Albaugh's arpeggiator (which you can interact with) has a good user experience too.
- Areas of the screen are clearly labeled and the bright yellow color stands out for selected items,
- The screen is laid out well - you select options in each section and finally simulate the chords by tapping the large Play button on bottom right,
- The subtle bounce animation of the Play button is very helpful on a dense screen (it's not distracting) to grab the users' attention, and
- The keys at the top of the screen and sounds simulate the chord progression in a clear, helpful, and fun way.
All of this done by using SVG - it's a very interesting and useful application to music.
Comments