ink-ru/404.html

## 404.html


<!DOCTYPE html>
<html>
<head>
  <title>Airflow 404 = lots of circles</title>
  <link rel="icon" type="image/png" href="/static/pin_32.png">
</head>

<body>
    <div style="font-family: verdana;">
        <h1>Airflow 404 = lots of circles</h1>
        <p>190ed2043d8d</p>
    </div>
    <div
            id="div_svg"
            class="centered text-center"
            style="border: 1px solid #CCC; padding:0px;margin:0;">
        <svg></svg>

    </div>
    <script src="/static/d3.v3.min.js"></script>
    <script>
    var height =700;
    var width = document.getElementById("div_svg").offsetWidth;
    var points = 20;
    var matrix = [];
    var duration = 2000;
    var i = 0;
    var flip = 0;
    var colors = [
        "#FF5A5F", "#007A87", "#7B0051", "#00D1C1", "#8CE071", "#FFB400",
        "#FFAA91", "#B4A76C", "#9CA299", "#565A5C"
    ];


    function choose(choices) {
        var index = Math.floor(Math.random() * choices.length);
        return choices[index];
    }
    // Making a matrix
    for(var x=0; x<points; x++) {
        for(var y=0; y<points; y++) {
            matrix[i] = {
                'x': x,
                'y': y,
            }
            i += 1;
        }
    }
    sclx = d3.scale.linear().domain([-1, points]).range([0, width]);
    scly = d3.scale.linear().domain([-1, points]).range([0, height]);

    circles = d3.select("svg")
    .attr('width', "100%")

    .attr('height', height)
    .selectAll("circle").data(matrix).enter()
    .append("circle")
    .attr("stroke", 'black')
    .attr("fill", 'none')
    .attr("cx", function(d, i) {return sclx(d.x)})
    .attr("cy", function(d, i) {return scly(d.y)})
    .attr("r", function(d, i) {return 0});


    function toggle(){
        var size = 50 + (200* Math.random());
        var y_delay = 0;
        var random_delay = 0;
        if(Math.random() > 0.7){
            y_delay = 50+ (Math.random() * 50);
        }
        var x_delay = 0;
        if(Math.random() > 0.7){
            x_delay = 50+ (Math.random() * 50);
        }
        if(Math.random() > 0.7){
            random_delay = 1;
        }

        var random_x = Math.random() * width;
        var random_y = Math.random() * height;
        if(Math.random() > 0.5){
            col = choose(colors);
        } else {
            col = "black";
        }
        if(Math.random() > 0.8){
            col = function() {return choose(colors)};
        }


        if (flip==0){

            flip = 1;

            circles.transition()
            .duration(duration)
            .attr("cx", function(d, i) {return sclx(d.x)})
            .attr("cy", function(d, i) {return scly(d.y)})
            .attr("stroke", col)
            .delay(function(d, i) {return (random_delay * Math.random() * 1000) + (d.x*x_delay) + (d.y * y_delay)})
            .attr("r", function(d, i) {return size});
        }
        else{
            flip = 0;

            if(Math.random() > 0.6){
                circles.transition()
                .duration(duration)
                .attr("r", function(d, i) {return 0})
                .attr("cx", function(d, i) {return random_x})
                .attr("stroke", col)
                .delay(function(d, i) {return (i/2) *  Math.random() * 5})
                .attr("cy", function(d, i) {return random_y});
            }
            else{
                circles.transition()
                .duration(duration)
                .attr("cx", function(d, i) {return sclx(d.x)})
                .attr("cy", function(d, i) {return scly(d.y)})
                .attr("stroke", col)
                .delay(function(d, i) {return (random_delay * Math.random() * 1000) + (d.x*x_delay) + (d.y * y_delay)})
                .attr("r", function(d, i) {return 0});
            }
        }

    }

    setInterval(toggle, duration*3);
    toggle();

    </script>
</body>
</html>



	<!DOCTYPE html>
	<html>
	<head>
	<title>Airflow 404 = lots of circles</title>
	<link rel="icon" type="image/png" href="/static/pin_32.png">
	</head>

	<body>
	<div style="font-family: verdana;">
	<h1>Airflow 404 = lots of circles</h1>
	<p>190ed2043d8d</p>
	</div>
	<div
	id="div_svg"
	class="centered text-center"
	style="border: 1px solid #CCC; padding:0px;margin:0;">
	<svg></svg>

	</div>
	<script src="/static/d3.v3.min.js"></script>
	<script>
	var height =700;
	var width = document.getElementById("div_svg").offsetWidth;
	var points = 20;
	var matrix = [];
	var duration = 2000;
	var i = 0;
	var flip = 0;
	var colors = [
	"#FF5A5F", "#007A87", "#7B0051", "#00D1C1", "#8CE071", "#FFB400",
	"#FFAA91", "#B4A76C", "#9CA299", "#565A5C"
	];


	function choose(choices) {
	var index = Math.floor(Math.random() * choices.length);
	return choices[index];
	}
	// Making a matrix
	for(var x=0; x<points; x++) {
	for(var y=0; y<points; y++) {
	matrix[i] = {
	'x': x,
	'y': y,
	}
	i += 1;
	}
	}
	sclx = d3.scale.linear().domain([-1, points]).range([0, width]);
	scly = d3.scale.linear().domain([-1, points]).range([0, height]);

	circles = d3.select("svg")
	.attr('width', "100%")

	.attr('height', height)
	.selectAll("circle").data(matrix).enter()
	.append("circle")
	.attr("stroke", 'black')
	.attr("fill", 'none')
	.attr("cx", function(d, i) {return sclx(d.x)})
	.attr("cy", function(d, i) {return scly(d.y)})
	.attr("r", function(d, i) {return 0});



	function toggle(){
	var size = 50 + (200* Math.random());
	var y_delay = 0;
	var random_delay = 0;
	if(Math.random() > 0.7){
	y_delay = 50+ (Math.random() * 50);
	}
	var x_delay = 0;
	if(Math.random() > 0.7){
	x_delay = 50+ (Math.random() * 50);
	}
	if(Math.random() > 0.7){
	random_delay = 1;
	}

	var random_x = Math.random() * width;
	var random_y = Math.random() * height;
	if(Math.random() > 0.5){
	col = choose(colors);
	} else {
	col = "black";
	}
	if(Math.random() > 0.8){
	col = function() {return choose(colors)};
	}



	if (flip==0){

	flip = 1;

	circles.transition()
	.duration(duration)
	.attr("cx", function(d, i) {return sclx(d.x)})
	.attr("cy", function(d, i) {return scly(d.y)})
	.attr("stroke", col)
	.delay(function(d, i) {return (random_delay * Math.random() * 1000) + (d.xx_delay) + (d.y y_delay)})
	.attr("r", function(d, i) {return size});
	}
	else{
	flip = 0;

	if(Math.random() > 0.6){
	circles.transition()
	.duration(duration)
	.attr("r", function(d, i) {return 0})
	.attr("cx", function(d, i) {return random_x})
	.attr("stroke", col)
	.delay(function(d, i) {return (i/2) * Math.random() * 5})
	.attr("cy", function(d, i) {return random_y});
	}
	else{
	circles.transition()
	.duration(duration)
	.attr("cx", function(d, i) {return sclx(d.x)})
	.attr("cy", function(d, i) {return scly(d.y)})
	.attr("stroke", col)
	.delay(function(d, i) {return (random_delay * Math.random() * 1000) + (d.xx_delay) + (d.y y_delay)})
	.attr("r", function(d, i) {return 0});
	}
	}

	}

	setInterval(toggle, duration*3);
	toggle();

	</script>
	</body>
	</html>