🚧  samjarvis.co.uk is experiencing a mild case of re-development at the moment. We apologise for the inconvenience.   🚧
🚧  Site is in development  🚧

How this works

Since this experiment got quite a bit of exposure, I thought I'd put together an explanation of how it works. The bulk of the effect is due to the combination of a blur filter on two circle elements and a contrast filter on the containing element.

A note on browser support

In case you're using a browser that doesn't support the filter CSS property (that includes IE11 - sadly), here's what it should look like. It does however work in Edge, Chrome and Firefox, with mildly different properties.


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.


The contrast effect essentially rounds the pixels rendered by .box's layer to their nearest 3-bit colour representation. This produces a stark line where the thresholds for each colour jump. The "metaball" or 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.


The light border effectively decreases the difference between the overlapping blurred circles from the lightness threshold required to round to a colour and not round to black. The effect is somewhat akin to a refractive edge.


The effect around the outside of the box (in Chrome) resembles a kind of reflection effect. The black box-shadow on the surrounding box pushes the threshold up for colour to be rounded to black nearest the box. In Firefox it appears to act how you would expect, blending with the black in a normal way. This probably indicates some low-level way in which the two rendering engines differ, don't ask me though!