Drumkit in SCSS and JavaScript
This drumkit, hand-coded in (lots of) CSS, became a great opportunity to teach myself SCSS. Yes, it would have been easier to create the drumkit as an SVG in Illustrator! But as I had previously made projects with SVG illustrations, writing it in SCSS was a new challenge.
Hitting a key animates the drum and plays the corresponding audio — based on a JavaScript challenge from Wes Bos’ JavaScript30 course.
Demoed at CodePen Brighton Show & Tell October 2018.
Best viewed in Chrome on desktop.