Skip to main content

Make art using code with the Flat Surface Shader

flat surface shader

Get experimenting with this light simulator

The web is a beautiful place. It's made all the more beautiful when web designers come together just for the sake of making something, well, beautiful! Flat Surface Shader (opens in new tab) may not be the most useful of tools but as soon as we stumbled upon it, we couldn't stop playing with the animation and colours for hours.

Created by Matthew Wagerfield (opens in new tab) and Tobias van Schneider (opens in new tab), the site is a welcome break from the stresses of everyday. The lighting simulation can be configured to use either the 2D context of a canvas element or an array of SVG polygons to draw the triangles. It also utilises native Float32Arrays to store numerical data for highly optimised calculations.

With all its colours, animations, widths, heights, and speed, the Flat Surface Shader is seriously fun. We suggest you get experimenting; who knows, you might even gain some inspiration from it!

flat surface shader

flat surface shader

flat surface shader

flat surface shader

flat surface shader

Make your own patterns on the Flat Surface Shader (opens in new tab) website.

Like this? Read these!

Have you come across a beautiful site? Let us know in the comments box below!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.