etra0/.block

## .block
license: gpl-3.0
width: 910
height: 310
scrolling: no
border: no

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
	<title></title>

    <style media="screen">
        body {
            text-align: center;
        }
    </style>
  </head>

  <body>

    <div id="vis"></div>

    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

## main.js
'use strict';

let STROKEWIDTH = 20,
    COLOR = 'black';

function randInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


class Figure {
    constructor(canvas, scale) {
        this.canvas = canvas;
        this.scale = scale;
        this.figure = canvas.append('g').attr("class", "figure-container");
    }

    pickFigure() {
        // this is stupid AF.
        switch(randInt(0, 3)) {
            case 0:
                this.generateCircle();
                break;
            case 1:
                this.generateX();
                break;
            case 2:
                this.generateSquare();
                break;
            case 3:
                this.generateTriangle();
                break;
        }
    }

    startAnimation() {
        let vm = this;
        function tweenRotationA(d, i, a) {
            return d3.interpolateString(`translate(0, 0) scale(1) rotate(0, ${vm.scale/2}, ${vm.scale/2})`, `translate(${vm.scale/2}, ${vm.scale/2}) scale(0) rotate(180, ${vm.scale/2}, ${vm.scale/2})`);
        }

        function tweenRotationB(d, i, a) {
            return d3.interpolateString(`translate(${vm.scale/2}, ${vm.scale/2}) scale(0) rotate(180, ${vm.scale/2}, ${vm.scale/2})`, `translate(0, 0) scale(1) rotate(360, ${vm.scale/2}, ${vm.scale/2})`);
        }

        let i = 0;
        this.pickFigure();
        this.figure
            .transition()
            .delay((d, i) => {return i*100;})
            .on("start", function repeat() {
                d3.active(this)
                    .transition()
                    .duration(1000)
                    .delay(randInt(800, 1500))
                    .attrTween("transform", tweenRotationA)
                    .on('end', () => {
                        vm.figure.select(".figure").remove()
                        vm.pickFigure();
                    })
                    .transition()
                    .duration(1000)
                    .attrTween("transform", tweenRotationB)

                    .on('start', repeat)
            })

        //this.pickFigure();
    }

    generateCircle() {
        let vm = this;
        this.figure.append('circle')
            .attr("class", "figure")
            .attr("r", vm.scale/2)
            .attr("cx", vm.scale/2)
            .attr("cy", vm.scale/2)
            .attr("fill", "none")
            .attr("stroke-width", STROKEWIDTH)
            .attr("stroke", COLOR);
    }

    generateSquare() {
        let vm = this;
        this.figure.append("rect")
            .attr("class", "figure")
            .attr("width", vm.scale)
            .attr("height", vm.scale)
            .attr("fill", "none")
            .attr("stroke-width", STROKEWIDTH)
            .attr("stroke", COLOR);
    }

    generateX() {
        let X = `M 0 0 l ${this.scale} ${this.scale} M 0 ${this.scale} l ${this.scale} -${this.scale}`;
        this.figure.append('path')
            .attr("class", "figure")
            .attr("d", X)
            .attr("fill", "none")
            .attr("stroke-width", STROKEWIDTH)
            .attr("stroke", COLOR);
    }

    generateTriangle() {
        let Triangle = `M 0 ${this.scale} l ${this.scale} 0 l -${this.scale/2} -${this.scale} Z`
        this.figure.append('path')
            .attr("class", "figure")
            .attr("d", Triangle)
            .attr("fill", "none")
            .attr("stroke-width", STROKEWIDTH)
            .attr("stroke", COLOR);
    }
}

// Figure scaling
let scale = 150;

let canvas = d3.select('#vis')
    .append('svg')
        .attr('width', scale*6)
        .attr('height', scale*2);

let displaced_groups = [];
for (let i = 0; i < 4; i++) {
    displaced_groups.push(canvas.append("g").attr("transform", `translate(${scale*1.3*i+scale/2}, ${scale/2})`))
}

let figures = [];
displaced_groups.forEach(c => {
    let _figure = new Figure(c, scale);
    figures.push(_figure);
})


figures.forEach(_figure => {
    _figure.startAnimation();
})
	license: gpl-3.0
	width: 910
	height: 310
	scrolling: no
	border: no
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>

	<style media="screen">
	body {
	text-align: center;
	}
	</style>
	</head>

	<body>

	<div id="vis"></div>

	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	'use strict';

	let STROKEWIDTH = 20,
	COLOR = 'black';

	function randInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}


	class Figure {
	constructor(canvas, scale) {
	this.canvas = canvas;
	this.scale = scale;
	this.figure = canvas.append('g').attr("class", "figure-container");
	}

	pickFigure() {
	// this is stupid AF.
	switch(randInt(0, 3)) {
	case 0:
	this.generateCircle();
	break;
	case 1:
	this.generateX();
	break;
	case 2:
	this.generateSquare();
	break;
	case 3:
	this.generateTriangle();
	break;
	}
	}

	startAnimation() {
	let vm = this;
	function tweenRotationA(d, i, a) {
	return d3.interpolateString(`translate(0, 0) scale(1) rotate(0, ${vm.scale/2}, ${vm.scale/2})`, `translate(${vm.scale/2}, ${vm.scale/2}) scale(0) rotate(180, ${vm.scale/2}, ${vm.scale/2})`);
	}

	function tweenRotationB(d, i, a) {
	return d3.interpolateString(`translate(${vm.scale/2}, ${vm.scale/2}) scale(0) rotate(180, ${vm.scale/2}, ${vm.scale/2})`, `translate(0, 0) scale(1) rotate(360, ${vm.scale/2}, ${vm.scale/2})`);
	}

	let i = 0;
	this.pickFigure();
	this.figure
	.transition()
	.delay((d, i) => {return i*100;})
	.on("start", function repeat() {
	d3.active(this)
	.transition()
	.duration(1000)
	.delay(randInt(800, 1500))
	.attrTween("transform", tweenRotationA)
	.on('end', () => {
	vm.figure.select(".figure").remove()
	vm.pickFigure();
	})
	.transition()
	.duration(1000)
	.attrTween("transform", tweenRotationB)

	.on('start', repeat)
	})

	//this.pickFigure();
	}

	generateCircle() {
	let vm = this;
	this.figure.append('circle')
	.attr("class", "figure")
	.attr("r", vm.scale/2)
	.attr("cx", vm.scale/2)
	.attr("cy", vm.scale/2)
	.attr("fill", "none")
	.attr("stroke-width", STROKEWIDTH)
	.attr("stroke", COLOR);
	}

	generateSquare() {
	let vm = this;
	this.figure.append("rect")
	.attr("class", "figure")
	.attr("width", vm.scale)
	.attr("height", vm.scale)
	.attr("fill", "none")
	.attr("stroke-width", STROKEWIDTH)
	.attr("stroke", COLOR);
	}

	generateX() {
	let X = `M 0 0 l ${this.scale} ${this.scale} M 0 ${this.scale} l ${this.scale} -${this.scale}`;
	this.figure.append('path')
	.attr("class", "figure")
	.attr("d", X)
	.attr("fill", "none")
	.attr("stroke-width", STROKEWIDTH)
	.attr("stroke", COLOR);
	}

	generateTriangle() {
	let Triangle = `M 0 ${this.scale} l ${this.scale} 0 l -${this.scale/2} -${this.scale} Z`
	this.figure.append('path')
	.attr("class", "figure")
	.attr("d", Triangle)
	.attr("fill", "none")
	.attr("stroke-width", STROKEWIDTH)
	.attr("stroke", COLOR);
	}
	}

	// Figure scaling
	let scale = 150;

	let canvas = d3.select('#vis')
	.append('svg')
	.attr('width', scale*6)
	.attr('height', scale*2);

	let displaced_groups = [];
	for (let i = 0; i < 4; i++) {
	displaced_groups.push(canvas.append("g").attr("transform", `translate(${scale1.3i+scale/2}, ${scale/2})`))
	}

	let figures = [];
	displaced_groups.forEach(c => {
	let _figure = new Figure(c, scale);
	figures.push(_figure);
	})


	figures.forEach(_figure => {
	_figure.startAnimation();
	})