DEV Community

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

Posted on β€’ Originally published at alvaromontoro.com

14 1

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

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
 
raimonvibe profile image
Raimon β€’

Amazing 🀩

Collapse
 
erinposting profile image
Erin Bensinger β€’

🀯🀯🀯

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay