JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="600" height="600"></canvas>

percentage of base brick <span id="percent"></span>(%)
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="100" class="slider" id="myRange">
</div>

<hr/>
<div id="output"></div>
<script src="brick.js"></script>

CSS

canvas{
    width:600px;
    height:600px;
    background:#eeeeee;
    display:block;
}

JavaScript

function buildBriques(o){
    var {r, brick, d, x} = o;

    var X = {
        x:x,
        y:Math.sqrt(r*r - brick.w*brick.w/4) - brick.h
    }
    const ri = Math.sqrt(X.x*X.x+X.y*X.y);
    var theta = 2*Math.atan2(x, X.y);//base brick
    var beta = 2*Math.asin(d/2/ri)
    
    var endAngle = Math.PI*2 + Math.PI/2 - theta/2;
    var left = Math.PI/2 + theta/2;
    //start from left
    //end at right
    var bricks = [{pts:[
        X,
        {
            x:brick.w/2,
            y:X.y+brick.h
        },
        {
            x:-brick.w/2,
            y:X.y+brick.h
        },
        {
            x:-X.x,
            y:X.y
        }]}
    ];
    var iter = 0;
    while(left + theta + beta < endAngle && iter++ < 200){
        var b = [
            //right point
            {
                x:ri*Math.cos(left+beta),
                y:ri*Math.sin(left+beta)
            },
            //left point
            {
                x:ri*Math.cos(left+beta+theta),
                y:ri*Math.sin(left+beta+theta)
            }
        ];
        var u = {
            x:b[1].x - b[0].x, 
            y:b[1].y - b[0].y
        };
        var dir = Math.sqrt( Math.pow(u.x, 2) + Math.pow(u.y, 2))
        var nu = {
            x: u.x / dir,
            y: u.y / dir
        }
        var midU = {
            x:(b[1].x + b[0].x ) /2,
            y:(b[1].y + b[0].y ) /2
        }
        var a = -Math.PI/2;
        var tr = {
            x:(Math.cos(a)*nu.x - Math.sin(a) * nu.y) * brick.h + midU.x - nu.x * brick.w/2,
            y:(Math.sin(a)*nu.x + Math.cos(a) * nu.y) * brick.h + midU.y - nu.y * brick.w/2,
        }
        var a = Math.PI/2;
        var tl = {
            x:(Math.cos(a)*-nu.x - Math.sin(a) * -nu.y) * brick.h + midU.x + nu.x * brick.w/2,
            y:(Math.sin(a)*-nu.x + Math.cos(a) * -nu.y) * brick.h + midU.y + nu.y * brick.w/2,
        }
        bricks.push({
            pts:[
                b[0],
                tr,
                tl,
               ...