JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<canvas id=c width="600" height="600"></canvas>
</body>

CSS

#c {
  position:absolute;
  top:10;
  left:10;
  border: solid 1px black;
  }

#debug {
  position:absolute;
  top:10;
  left:820;  
  }

JavaScript

// Jon Palin, 6 October 2012
// inspired by http://mathlesstraveled.com/2012/10/05/factorization-diagrams/
//////////////////////////////////////////////////////////////////////
var N; // leave N undefined to show the first 100 diagrams
var N = 3 * 4 * 7 * 11; // choose N to draw a particular diagram
// start the diagram with the largest or smallest prime
var smallfirst = false;
//////////////////////////////////////////////////////////////////////
var c;
var PI = 355 / 113;
var off2 = 0;

function start() {
    c = document.getElementById("c").getContext("2d");
    if (N === undefined) {
        var S = 60;
        for (var i = 1; i <= 100; i++) {
            var ci = (i - 1) % 10 + 1;
            var ri = (i - ci) / 10;
            draw(i, S * (ci - 0.5), S * (ri + 0.5), S * 0.45, 0);
            c.beginPath();
            c.rect(S * (ci - 1), S * ri, S, S);
            c.stroke();
        }
    }
    else {
        draw(N, 300, 300, 270, 0);
    }
}


function draw(N, cx, cy, s) {
    if (N == 1) {
        c.beginPath();
        c.arc(cx, cy, s, 0, 2 * PI);
        c.fill();
    }
    else {
        var f = primefactor(N);
        if (f == 2) {
            var oy = 0;
            if (N % 4 == 0) {
                f = 4;
                var r = 2 * s / (f + 2);
                var d = f * s / (f + 2);
            }
            else {
                f = 2;
                var r = 0.75 * 2 * s / (2 + 2);
                var d = 2 * s / (2 + 2);
            }
        }
        else {
            var r = 2 * s / (f + 2);
            var d = f * s / (f + 2);
            var oy = d / 2 * (1 - Math.cos(PI / f));
        }

        for (var i = 0; i < f; i++) {
            x = Math.sin(PI + 2 * PI * (i + 0.5) / f + off2);
            y = Math.cos(PI + 2 * PI * (i + 0.5) / f + off2);
            draw(N / f, cx + x * d, cy - y * d + oy, r);
        }
    }
}

var primes = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,...