The hexagon with gooey circles moving throughout it that I made for the intro slide to the Gooey section of my OpenVis presentation.
This example also appears on my blog on More fun data visualizations with the gooey effect
You can find the other examples from the blog here
| license: gpl-3.0 |
| height: 420 |
| height: 420 |
| height: 1090 |
| height: 200 |
| height: 300 |
| height: 700 |
This is the first example of my blog on Beautiful color blending effects with SVGs & D3
The hexagon introduction to the Color blending section of my OpenVis 2016 talk "SVGs beyond mere shapes". In this example the circles are given the mix-blend-mode of screen to get nice effects when the circles overlap each other.
Another color blending example can be found here
Built with blockbuilder.org
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, si
