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?
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.
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.
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?