🚧  www.samjarv.is is experiencing a mild case of re-development at the moment, run while you still can!  πŸš§
🚧 Site is in development 🚧

The bulk of this effect is a combination of a contrast filterΒ on a containing element and a blur filter on two circle elements (with an additional rotating colour animation).


The blur filter allows the two circles to mix together. In this example the slightly out of sync rotating colour produces a number of unique mixes, showing you how the similar and different colours interact with the applied metaball effect.

With the blur and contrast filters removed:


The contrast effect essentially rounds the pixels rendered by the box to their nearest 3bit colour representation. This produces a stark line where the thresholds for each colour jump. The "metaball" or liquidy-surface-tension effect is a result of this threshold line following a smooth contour where the blurred circles blend into each other and into the black background. If the colours of the two circles are similar, they "stick". If they are different, the resulting overlap is rounded to black and looks like they're repelling.

With the contrast filter removed:


I simply can't think of any simpler way to describe how the border refraction effect functions than the below. It's caused by a border on the box that effectively decreases the difference between the overlapping blurred circles from the lightness threshold required to round to a colour "sooner" and looks like the circle arrives "sooner".


The effect around the outside of the box (in Chrome) resembles a kind of reflection effect and I have no idea why. In Firefox it appears to act how you would expect, blending with the black in a normal way.