Drumkit in SCSS and JavaScript

Screengrab of coded drumkit.

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.