Happy Pride

Created for Pride 2016

<!doctype html>
<html>
    <head>
     	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js"></script>
			<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

<style>

#page svg {
	border: 1px black solid;
}

#flash_container {
	text-align: center;
}

</style>
<body>

<title>Happy Pride!</title>
  <h1 style="text-align:center;">Happy Pride!</h1>

var radius = 10;
var width = radius*82;
var height = radius*32;

var div_svg = d3.select("#page").append("svg")
  .attr("width", width)
  .attr("height", height);

var flash_svg = d3.select("#flash").append("svg")
  .attr("width", width)
  .attr("height", height);

var circle_list = [];
for (var i = height/(2*radius); i >= 0; i--) {
	for (var j = width/(2*radius); j >= 0; j--) {
		circle_list.push([i, j]);
	}
}

var colorarray = ['#e41a1c','#377eb8','#4daf4a','#984ea3', "#f1c40f", "#e67e22", "#ff69b4"];

var prideLetters = [[3, 2], [3, 3], [3, 4], [3, 5],
					[4, 2], [5, 2], [6, 2], [7, 2], [8, 2], [9, 2], [10, 2], [11, 2], [12, 2],
					[4, 6], [5, 6], [6, 6],
					[7, 3], [7, 4], [7, 5], // P
					[3, 10], [3, 11], [3, 12], [3, 13],
					[4, 10], [5, 10], [6, 10], [7, 10], [8, 10], [9, 10], [10, 10], [11, 10], [12, 10],
					[4, 14], [5, 14], [6, 14],
					[7, 11], [7, 12], [7, 13],
					[8, 13], [9, 14], [10, 14], [11, 14], [12, 14], // R
					[3, 18], [3, 19], [3, 20], [3, 21], [3, 22],
					[4, 20], [5, 20], [6, 20], [7, 20], [8, 20], [9, 20], [10, 20], [11, 20],
					[12, 18], [12, 19], [12, 20], [12, 21], [12, 22], // I
					[3, 26], [3, 27], [3, 28], [3, 29], 
					[4, 26], [5, 26], [6, 26], [7, 26], [8, 26], [9, 26], [10, 26], [11, 26],
					[4, 30], [5, 30], [6, 30], [7, 30], [8, 30], [9, 30], [10, 30], [11, 30],
					[12, 26], [12, 27], [12, 28], [12, 29], // D
					[3, 34], [3, 35], [3, 36], [3, 37], [3, 38],
					[4, 34], [5, 34], [6, 34], [7, 34], [8, 34], [9, 34], [10, 34], [11, 34],
					[7, 34], [7, 35], [7, 36], [7, 37], [7, 38],
					[12, 34], [12, 35], [12, 36], [12, 37], [12, 38] // E
					];

circlesSet = new Set();

div_svg.append("rect")
	.attr("fill", "white")
	.attr("class", "flashscreen")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height)
    .attr("opacity", 0);

// console.log("launch");

d3.selectAll(".color").remove();
    		d3.selectAll(".flashscreen").style("opacity", 1);
    		d3.selectAll(".pride").attr("fill", "white").style("opacity", "1");

var flashloop = function() {
				d3.select(".flashscreen")
				.transition().duration(1000)
				.attr("fill", colorarray[Math.floor(Math.random()*colorarray.length)])
				.each("end", flashloop)
			}
			flashloop();
    	}
    });

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

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js