Hey! My name is Daan Weijers, and I'm a UX and UI designer from the Netherlands. As you might read on my portfolio I believe being able to code is an important part of my job.
For years I've been a fan of circle packing algorithms for design, but I've never been able to find a service or website to do it for you. So, as code-practice, I decided to create one.
In its current state, the circlepacker recognises white (#ffffff) and transparent pixels (alpha < 1) as places where it can't start a circle.
Start by uploading an image, selecting an unlimited amount of colours, and playing with the parameters (some of which I'll explain below).
Because the algorithm randomly searches for places to create a new circle, there's not a fixed distance between circles. There is, however, a minimum distance which you can change with this slider.
The script runs on 24 frames per second. The spawn rate tells the script how many times to try to create a new circle. A higher spawn rate means more circles, and will probably result in a more uniform circle size because the chance of 'collison' is higher.
Quite self-explanatory. When you stop and press start, you will lose your old image.
This exports the current state of the algorithm to an .svg file you can open in Sketch, Illustrator, or whatever.
Please, by all means, play around with the script. If you have any feedback, don't hesitate to drop me a line.