This content originally appeared on DEV Community 👩💻👨💻 and was authored by Alvaro Montoro
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):
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Alvaro Montoro
Alvaro Montoro | Sciencx (2023-02-05T22:22:23+00:00) CSS Art: Nintendo Switch. Retrieved from https://www.scien.cx/2023/02/05/css-art-nintendo-switch/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.