      ___         ___         ___         ___                   ___         ___         ___         ___         ___         ___         ___         ___                   ___         ___         ___
     /\__\       /\  \       /\  \       /\  \        ___      /\  \       /\  \       /\__\       /\  \       /\__\       /\  \       /\  \       /\  \        ___      /\  \       /\  \       /\__\
    /:/  /      /::\  \     /::\  \     /::\  \      /\  \    /::\  \     /::\  \     /::|  |     /::\  \     /:/  /      /::\  \     /::\  \     /::\  \      /\  \    /::\  \     /::\  \     /::|  |
   /:/__/      /:/\:\  \   /:/\:\  \   /:/\:\  \     \:\  \  /:/\ \  \   /:/\:\  \   /:|:|  |    /::::\  \   /:/__/      /:/\:\  \   /:/\:\  \   /:/\:\  \     \:\  \  /:/\ \  \   /:/\:\  \   /:|:|  |
  /::\  \ ___ /::\~\:\  \ /::\~\:\  \ /::\~\:\  \    /::\__\_\:\~\ \  \ /:/  \:\  \ /:/|:|  |__ /::::::\  \ /::\  \ ___ /::\~\:\  \ /::\~\:\  \ /::\~\:\  \    /::\__\_\:\~\ \  \ /:/  \:\  \ /:/|:|  |__
 /:/\:\  /\__/:/\:\ \:\__/:/\:\ \:\__/:/\:\ \:\__\__/:/\/__/\ \:\ \ \__/:/__/ \:\__/:/ |:| /\__/:::HH:::\__/:/\:\  /\__/:/\:\ \:\__/:/\:\ \:\__/:/\:\ \:\__\__/:/\/__/\ \:\ \ \__/:/__/ \:\__/:/ |:| /\__\
 \/__\:\/:/  \/__\:\/:/  \/_|::\/:/  \/_|::\/:/  /\/:/  /  \:\ \:\ \/__\:\  \ /:/  \/__|:|/:/  \::1991::/  \/__\:\/:/  \/__\:\/:/  \/_|::\/:/  \/_|::\/:/  /\/:/  /  \:\ \:\ \/__\:\  \ /:/  \/__|:|/:/  /
      \::/  /     \::/  /   |:|::/  /   |:|::/  /\::/__/    \:\ \:\__\  \:\  /:/  /    |:/:/  / \::::::/  /     \::/  /     \::/  /   |:|::/  /   |:|::/  /\::/__/    \:\ \:\__\  \:\  /:/  /    |:/:/  /
      /:/  /      /:/  /    |:|\/__/    |:|\/__/  \:\__\     \:\/:/  /   \:\/:/  /     |::/  /   \::::/  /      /:/  /      /:/  /    |:|\/__/    |:|\/__/  \:\__\     \:\/:/  /   \:\/:/  /     |::/  /
     /:/  /      /:/  /     |:|  |      |:|  |     \/__/      \::/  /     \::/  /      /:/  /     \::/  /      /:/  /      /:/  /     |:|  |      |:|  |     \/__/      \::/  /     \::/  /      /:/  /
     \/__/       \/__/       \|__|       \|__|                 \/__/       \/__/       \/__/       \/__/       \/__/       \/__/       \|__|       \|__|                 \/__/       \/__/       \/__/

Illustration app using only circle intersections

Using a circle intersection graph to create a simple illustration app that can be used to create art from circles.

Written 14 February 2020 · Updated 16 March 2024

Export options

Circle intersections

While stumbling around Reddit I came across a post that showed a human face made from circles. It sparked an interest of a simple web application to draw circles and fill the intersection areas to see what else could be created.

While investigating I also came across a designer called Dorota Pankowsa who created a series of animals made from 13 circles that was originally inspired from the Twitter logo that was made from 13 circles (!!! Fig 404 !!!)

Fig. - Twitter logo made from circles

I have written in detail about a novel approach to calculating the intersection areas of circles in my 'Circle intersections with graph data structures' project.

Instructions

Hopefully the application you see on this page is self-explanatory, but here are some instructions to get you started:

The controls at the top allow you to toggle between drawing, filling and viewing modes. There are also controls to start a new drawing, and save the current drawing as an image or JSON data.
In drawing mode, click and drag to draw a circle. You can also duplicate and remove circles using the toolbar when a circle is selected.
Place your cursor at the edge of a circle to resize it.
There are 'Undo' and 'Redo' controls to help you if you make a mistake.
In fill mode, click on the intersection areas to fill them with a color. You can apply the foreground or background color to the intersection areas by clicking multiple times to toggle between the two colors. A third click will remove the fill.
Check out the gallery for some examples of what can be created, including some of the animals from Dorota Pankowsa's series.