Flat Surface Shader (FSS) animated background is written in JavaScript by Matthew Wagerfield and Tobias van Schneider for rendering lit Triangles to a number of contexts. Basically, this tool takes geometry, light and triangles and turns it into something fun, exciting and beautiful that everyone can use. With this Flat Surface Shader, triangles are rendered into three different contexts (WebGL, Canvas 2D and SVG).
You can see demo from developper here or one funny example of use here Flat Surface Shader Earth
On my side, I render FSS using a Canvas support.You can choose between 7 color presets or you can configure the Canvas yourself.
For Gantry 5, template Hydrogen.
For other templates, unzip the file and do a manual installation
Don't forget to add these 2 lines
@import 'dependencies';
@import 'etl_particle-fss';
in your custom.scss (/templates/g5_hydrogen/custom/scss/custom.scss)
or create this file and insert these 2 lines with the help of your text editor (/templates/g5_hydrogen/custom/scss/custom.scss)
See DemoThe particles in English or in French are technically identical: Only the interface of the particle need to be translated (yalm file). The twig and scss files are similar.
- UNZIP the file on your computer.
- You will find some directories (particles, scss, js, images)
- Copy the directories (including files) to
root/templates/TEMPLATE_DIR/custom/
via your FTP client (like FileZilla)