DEV Community

Cover image for CSS Art: Nintendo Switch
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at alvaromontoro.com

 

CSS Art: Nintendo Switch

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):

Top comments (5)

Collapse
 
madsstoumann profile image
Mads Stoumann

Great work, as always! Was there a “draw a Nintendo Switch”-challenge? This one popped up in my feed last week as well: codepen.io/kassandrasanch/pen/mdPRyVx

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

Thanks! And about the challenge, not that I know, but Manz also did one this weekend, and they told me of one more developer (although it might have been Kass)... Maybe we picked it because it's a relatively easy one to code. Don't ask me to draw the playstation 5 with controllers 😳😅

Collapse
 
vulcanwm profile image
Medea

This is amazing!

Collapse
 
raimoncoding profile image
Raimon

Amazing 🤩

Collapse
 
erinposting profile image
Erin Bensinger

🤯🤯🤯

Top Heroku Alternatives (For Free!)

Recently Heroku shut down free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis on November 28th, 2022. So Meshv Patel put together some free alternatives in this classic DEV post.