Mathematics beauty lies in the creation of very complex patterns using only simple steps. This visualization is a good example. Here is the simpe process used to create these advanced representations.
Draw a circle, and add some graduations on it in order to split the circle into arcs of same length. Let's consider we spitted the circle into 5 equal arcs.
If we want to display the table of 2 representation, we just have to draw some segments between our graduation, each one linking the multiplied value to the final result. For instance:
We do not have a enough graduation for the third one, as we need a sixth graduation. So, just apply a modulo of your total number of graduation to get an existing one. In this case, link graduation 3 to 6 % 5 = 1 graduation.
Repeat this step until you loop on already existing values.
This video has been greatly inspired by a YouTube video from Mickaël Launay, a French YouTuber:
Source code is available on GitHub: https://github.com/jpetitcolas/multiplication-circle.
This project has been released under MIT license, meaning you can do whatever you want with it, without any restrictions.