CSS Art: Nintendo Switch

CSS Art: Nintendo Switch

Live-coding this iconic console with HTML and CSS


1 min read

This weekend, I streamed while live coding/drawing a Nintendo Switch with HTML and CSS. The drawing is:

  • Responsive: resize the window to see it change

  • Semantic: sections, the buttons are buttons

  • Customizable: CSS variables to change the JoyCon colors

  • Realistic: at least that was the goal ๐Ÿ˜…

Here's the demo on CodePen (the drawing and the original photograph):

The process took around 4 hours (broken into different sessions that I will call "my kids are finally sleeping" and "my kids are not awake yet") that I put together and sped up on this video:

Later, I did another version. This time I plugged in a library I created to handle the Gamepad API, and I tried connecting the JoyCon to the computer... it works :)

If you have a Nintendo Switch, try plugging the left controller into your computer via Bluetooth, then head to this demo (only some of the buttons will work):