Tile - SixFold 1

Credit

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sixfold Pattern 1</title>

<style>

line {
            stroke: #000;
            stroke-width: 1px;
        }

circle, rect {
            fill-opacity: 0;
            stroke: #000;
            stroke-width: 1px;
            stroke-opacity: 1;
        }

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

.final {
            stroke-width: 3px;
        }

</style>

</head>
<body>

const height = 500;
    const width = 960;
    const r = 200;
    const duration = 1500;

let svg = d3.select('body').append('svg')
        .attr('height', height)
        .attr('width', width)
        .attr('overflow', 'hidden');

let g = svg.append('g')
        .attr('transform', 'translate(' + (width/2) + ',' + (height/2) +')');

let start = Date.now();
    let count = 0;
    d3.timer(animate);

function step0 () {

g.append('circle')
            .attr('id', 'step1Circle')
            .classed('construction', true)
            .transition()
            .duration(duration)
            .attr('r', r);
    }

function step1 () {

const lineNum = 12;
        const lineOffset = 15;

for (let i = 0; i < lineNum; i++) {
            g.append('line')
                .attr('id', 'step1Line' + i)
                .classed('construction', true)
                .transition()
                .duration(duration)
                .attr('x2', (r+lineOffset) * Math.sin((2*Math.PI/lineNum)*i))
                .attr('y2', (r+lineOffset) * Math.cos((2*Math.PI/lineNum)*i));
        }

}

function step2 () {
        const lineNum = 6;

for (let i = 0; i < lineNum; i++) {
            let intersect = findCircleIntersection(d3.select('#step1Line' + i*2), d3.select('#step1Circle'));
            let intersect2 = findCircleIntersection(d3.select('#step1Line' + ((i+1)*2) % (lineNum*2)), d3.select('#step1Circle'));
            let points = {'x1': intersect.x, 'y1': intersect.y, 'x2': intersect2.x, 'y2': intersect2.y};
            addLine(points, 2, i);
        }
    }

function step3 () {
        const lineNum = 6;

for (let i = 0; i < lineNum; i++) {
            let intersect = findLineIntersection(d3.select('#step2Line' + i), d3.select('#step2Line' + (i+1)%lineNum));
            let intersect2 = findLineIntersection(d3.select('#step2Line' + (i+2)%lineNum), d3.select('#step2Line' + (i+3)%lineNum));
            let points = {'x1': intersect.x, 'y1': intersect.y, 'x2': intersect2.x, 'y2': intersect2.y};
            addLine(points, 3, i);
        }
    }

function step4 () {
        const lineNum = 6;

for (let i = 0; i < lineNum; i++) {
            let intersect = findLineIntersection(d3.select('#step3Line' + i), d3.select('#step3Line' + (i+1)%lineNum));
            let intersect2 = findLineIntersection(d3.select('#step3Line' + (i+2)%lineNum), d3.select('#step3Line' + (i+3)%lineNum));
            let points = extendLine(intersect, intersect2, 100);
            addLine(points, 4, i);
        }
    }

function step5 () {
        const lineNum = 6;

for (let i = 0; i < lineNum; i++) {
            let intersect = findLineIntersection(d3.select('#step2Line' + i), d3.select('#step4Line' + (i+2)%lineNum));
            let intersect2 = findLineIntersection(d3.select('#step2Line' + (i+2)%lineNum), d3.select('#step4Line' + i));
            let points = {'x1': intersect.x, 'y1': intersect.y, 'x2': intersect2.x, 'y2': intersect2.y};
            addLine(points, 5, i);
            d3.select('#step5Line' + i)
                .classed('construction', false)
                .classed('final', true);
        }
    }

</script>

</body>
</html>

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