On a boring weekend while trying to kill some time, a friend of mine recommended me a video1 on YouTube which inspired me to write some code to make patterns like below.

This is called Modular Multiplication on a Circle(Times table). Here I’ll walk through a tutorial on how you can make this yourself.

To make these patterns, the circle is first divided into n equal parts. They’re numbered from 0 to n — 1.

Each part is then joined with its kth multiple. The pattern shown below is made with k = 7. Which means that 1 is connected with 7, 2 with 14, 3 with 21 and so on. Doing this for above setup, gives the following pattern.

Doing the above procedure for a large number of parts give rise to some beautiful patterns. Let’s make them using HTML Canvas.

First lets initialize the canvas and draw the main circle.
Circles are drawn with `.arc()` method.

The first checkpoint of the code would be to divide the circle in n-parts and get their coordinates for later use.

And the final part to join the points with their index multiplied by k. `.moveTo()` and `.lineTo()` are used to specify start and end points. And finally `.stroke()` method to draw it.

Also added some random colors for visual appeal ;). Take a look at my version here2.