Circle Packing Gravity Well

Using circle packing techniques to fill the area of alpha-numeric characters with circles.


Neil Pullman


Circle Packing Algorithm, WebAudio

Learn more

A little experiment working with circle packing techniques and post-processing in WebGL.

Circle packing is attempting to fit the most circles into a defined area as efficiently as possible. In this demo, all circles are the same diameter, with some being filled with white, while others filled with black, all trying to fit into the area taken up by alpha-numeric characters.

Be sure to click and type to watch the behavior in action. Also try rolling over and through the words and letters to watch the circles continue to try and fit in the defined area while a larger circle moves through.