Color palette showcase

I really like how Duminda Perera showcased color palettes in “Minimalist Color Palettes 2015“.

I decided to use this technique with the color theme of my wedding.

It is entirely built using HTML, CSS and SVG.  Click the image below to render it in full screen, and see the code in codepen (or gist). The background is a merge of gradient, blur and subtle noise using advanced SVG filters, which is rather CPU-intensive.

Screen Shot 2016-01-25 at 00.04.49

Download it as a wallpaper here

Advertisements

Colourful intermediate results

While killing time in the train, we worked with Anne on a small maze generation algorithm. But what started to be a way to visualise the results, turned into a result in itself (run it yourself here, be patient):

Screen Shot 2014-03-16 at 22.56.59
It all started with a way to visualise the distance of each square in a maze. From start to end, it uses the entire color hue.
Decreasing the wall size was very pleasant visually.
Screen Shot 2014-03-17 at 00.01.09
Visualising the progress of the construction is also very nice, like a growing organism.
Screen Shot 2014-03-17 at 00.29.25
Forgetting about the initial goal, here is a very nice colourful render.
Playing with colours, adding depth
Playing with a colour palette, adding depth by changing the color luminosity

Technically, the rendering is done using HTML canvas. I will detail the maze generation algorithm itself in a future post.

This led me to notice that using the HSL notation when drawing on a canvas was 3 times slower than using other color notation. (I created this JSperf). I filled a bug report on the Chromium bug tracker, let’s hope it will be addressed in the future.

The colourful visualisation is published online, you can run it here.