Tile - SixFold 1

Credit

This animation is based on a pattern 'Sixfold Pattern 1' available in 'Islamic Geometric Design' by Eric Broug.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
    line, circle {
        stroke: #000;
        stroke-width: 1px;
    }

circle {
        fill-opacity: 0;
        stroke-opacity: 1;
    }

.hidden {
        stroke-opacity: 0;
    }

.construction {
        stroke-dasharray: 2,5;
    }

.final {
        stroke-width: 3px;
    }
</style>
</head>
<body>
    <div id="container"></div>
        
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="utils.js"></script>
    <script>

// SET UP
    const margin = {top: 50, right: 50, bottom: 50, left: 50}
    const height = Math.max(500, window.innerHeight - margin.top - margin.bottom);
    const width = Math.max(height, window.innerWidth - margin.left - margin.right);
    
    let svg = d3.select('#container').append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom);
    
    let g = svg.append('g')
        .attr('transform', 'translate(' + (width/2 + margin.right) + ',' + (height/2 + margin.top) + ')');

// TILE DATA
    const r = {outer: height/2, padding: height/10};
    let circleData = {
        main: {step: 0, category: 'construction', r: r.outer - r.padding},
        outer: {step: 0, category: 'hidden', r: r.outer}
    };
    let lineData = {}

generateTile(circleData, lineData);

// CREATE
    let duration = 1000;
    g.selectAll('circle')
        .data(d3.entries(circleData)).enter()
        .append('circle')
        .attr('class', d => d.value.category)
        .transition().duration(duration).delay(d => d.value.step*duration)
            .attr('r', d => d.value.r);

g.selectAll('line')
        .data(d3.entries(lineData)).enter()
        .append('line')
        .attr('class', d => d.value.category)
        .attr('x1', d => d.value.x1)
        .attr('y1', d => d.value.y1)
        .attr('x2', d => d.value.x1)
        .attr('y2', d => d.value.y1)
        .transition().duration(duration).delay(d => d.value.step*duration)
            .attr('x2', d => d.value.x2)
            .attr('y2', d => d.value.y2);
    
    function generateTile(circleData, lineData) {
        step1(circleData, lineData);
        step2(circleData, lineData);
        step3(circleData, lineData);
        step4(circleData, lineData);
        step5(lineData);
    }

function step3(circleData, lineData) {
        // Step 3 - draw two triangles
        // (i.e draw lines between the intersection of every fourth line from step 1 and the circle)
        let lineNum = 3;
        let factor = 4;

// first triangle
        let triangle = [];
        for(let i = 0; i < lineNum; i++) {
            triangle.push(findCircleIntersection(lineData['step1line' + i*factor], circleData['main']));
        }
        for(let i = 0; i < lineNum; i++) {
            lineData['step3line' + i] = {step: 3, category: 'construction', x1: triangle[i].x, y1: triangle[i].y, 
                x2: triangle[(i+1)%lineNum].x, y2: triangle[(i+1)%lineNum].y};
        }

// second triangle
        triangle = [];
        let offset = 2;
        for(let i = 0; i < lineNum; i++) {
            triangle.push(findCircleIntersection(lineData['step1line' + (i*factor + offset) % (lineNum*factor)], circleData['main']));
        }
        for(let i = 0; i < lineNum; i++) {
            lineData['step3line' + (i + lineNum)] = {step: 3, category: 'construction', x1: triangle[i].x, y1: triangle[i].y, 
                x2: triangle[(i+1)%lineNum].x, y2: triangle[(i+1)%lineNum].y};
        }
    }

function step4(circleData, lineData) {
        // Step 4 - Draw lines between triangle intercepts
        let lineNum = 3;

// first triangle
        let triangle = [];
        for(let i = 0; i < lineNum; i++) {
            triangle.push(findLineIntersection(lineData['step3line' + i], lineData['step3line' + (i + lineNum)]));
        }
        for(let i=0; i < lineNum; i++) {
            let tempLine = {x1: triangle[i].x, y1: triangle[i].y, x2: triangle[(i+1)%lineNum].x, y2: triangle[(i+1)%lineNum].y};
            lineData['step4line' + i] = {step: 4, category: 'construction', ...extendLineToCircle(tempLine, circleData['outer'])};
        }
        
        // second triangle
        triangle = [];
        for(let i = 0; i < lineNum; i++) {
            triangle.push(findLineIntersection(lineData['step3line' + i], lineData['step3line' + (((i+2) % (lineNum)) + lineNum)]));        
        }
        for(let i=0; i < lineNum; i++) {
            let tempLine = {x1: triangle[i].x, y1: triangle[i].y, x2: triangle[(i+1)%lineNum].x, y2: triangle[(i+1)%lineNum].y};
            tempLine = extendLineToCircle(tempLine, circleData['outer']);
            lineData['step4line' + (i + lineNum)] = {step: 4, category: 'construction', x1: tempLine.x2, y1: tempLine.y2, x2: tempLine.x1, y2: tempLine.y1};
        }
    }

https://d3js.org/d3.v5.min.js