block by nbremer cbf61944aeb3204d3e4986ea645afc2b

Color blending - Infinity showcase

Full Screen

This is one of the color blending examples of my blog on Beautiful color blending effects with SVGs & D3

In this small showcase you can see the effect of using a mix-blend-mode on your SVG elements. Every 3 seconds it switches to a different set of colors or switches from “screen” to “multiply” mode and there are 7 different sets before it begins anew. In one ofthe 7 sets, it sets no blend mode and you can see with your own eyes that that version definitely has less magic :)

This example is heavily based on the wonderful particle demo of Sketch.js. I fell in love with it when I first saw it and really wanted to use it in my OpenVis presentation. Because I already thought it was perfect I only made the changes to make it run in an infinity symbol (for infinity) instead of attaching it to a mouse and to loop through several sets of colors and both the screen and multiply blend modes. Also, since I was giving a talk of using SVGs in non-standard ways in D3 I had to adjust the code and make it work with D3 alone. Performance wise, not the better option I know.

Another color blending example can be found here

Built with blockbuilder.org

index.html