𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗮 𝗽𝗮𝗶𝗻𝘁 𝘁𝗼 𝗵𝗶𝗱𝗲 𝗯𝗿𝗼𝘄𝘀𝗲𝗿 𝗺𝗶𝗻𝗶𝗴𝗮𝗺𝗲

I built a browser game inspired by Meccha Chameleon. In that game, hiders paint their bodies to match walls or crates. Seekers try to find them.

I built two tools around this idea.

  1. The Camo Lab This tool gives you exact colors, patterns, and poses for any surface. I used a single inline SVG for the chameleon. The colors change based on the surface palette.

I found that changing SVG colors with variables is easier than generating images. Each surface is a small data object. It includes three hex colors, a pattern, and a blend score. Adding a new surface takes one line of code.

  1. The Minigame This is a playable grid of tiles. Some tiles hide a chameleon. You tap the tiles to find them before the timer ends. I built this using React state. I did not use a canvas or a game engine. This keeps the file size small and the load time fast.

The tech stack:

The site uses static pages at the edge. The interactive parts hydrate on the client side.

Try the tools here: Camo Lab: [Link] Browser Game: [Link]

Ask me questions about SVG coloring or the OpenNext setup.

Source: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn