PixelPalette: an Art minigame

Screencap of PixelPalette

Sometimes learning new skills and technologies results in fun little side projects. We recently decided to broaden our arsenal for web development by diving into the JavaScript framework Svelte.

To bring our newfound knowledge into practice, we thought of this fun minigame. When playing PixelPalette, one has to guess the name of famous paintings that went through a pixelation filter.

The inspiration

The idea for this project came from a Dutch television show called ‘Project Rembrandt‘. In this painting contest, one of the challenges is to recreate a famous painting using only rough squares. This way, contestants learned a new approach to studying dominant colours in a work of art.

This inspired Tiede (our frontend developer) to come up with a game that reversed this challenge: can one guess famous paintings from seeing only these colour blocks?

Still of Dutch television show 'Project Rembrandt'
Project Rembrandt

Why Svelte?

Svelte is a JavaScript framework (similar to Vue.js or React) that provides structure to web development projects. Frameworks like these really shine when a website or web app needs to offer a degree of interactivity, or involves dynamically loaded content.

Svelte logo

Developing a simple game like PixelPalette proved to be a solid way of putting Svelte’s strengths to the test. Combining Svelte with the CSS framework TailwindCSS makes for a lovely lightweight, highly performant tech stack. Our first dive into Svelte has been a joy, and we can’t wait to to utilize this powerhouse for future projects.

Pixelated version of a famous painting
Hint: Ceci n’est pas un pixel

PixelPalette can be played here. It’s far from fully fleshed out; consider it a ‘public beta’ if you will. The project is also completely open source: Check out the Github repo over here.

Early feedback from friends taught us that the game is apparently very hard (even art students struggled!). What highscore can you reach?

Feeling inspired? A similar project in mind?

<< back to overview