Vector Nintendo controller

Open source file:

https://www.figma.com/community/file/1389027964970720800/super-nintendo-controller

Process and evolution

The process is fairly simple, draw the base shape, add a fill color, add different types of shadows, add lighting overlays, check if you need masks for upper layers, and start stacking up elements.

It took me around 2 days because it’s quite straining for the eye to get the shadows perfectly right. I also try to avoid color linear gradients as much as possible, replacing them by lighting- overlays and thus keeping color customization easy as pie.

Pretty cool render of the shapes and outlines :

And the final result with plastic texture:

Now I would have been a fool not to have fun by doing a few variants myself, so here goes a PS5 dualsense inspired one:

And another experiment a little more “pro” look:

Now what’s the point of all this ? Except for the challenge, not much really, except that an SVG can be a much lighter format than PNG or JPG, while also allowing more freedom when integrated into code. A creative developper could take the svg, and have fun making a game using an onscreen SNES controller that could be controlled by clicks. It’s also a very good start to do the same in a Rive file.

I measured the exported SVG to be about 170ko, which is still a little heavy, but drastically less than other formats considering you can expand it infinitely.

It can also be used as a very light asset for a website that strive for performance :

In any case, it’s made for people to enjoy as an open-source file:

https://www.figma.com/community/file/1389027964970720800/super-nintendo-controller

Thanks for reading this far!