All of the Lights D3 Edition

<!DOCTYPE html>
<html>
<head>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>	
</head>
<body>
	<center>
		<svg id='svg'></svg>
	</center>
	
</body>
<style>
	#svg{
		width: 1250px;
		height: 1200px;
	}

</style>
<script>
function colorMe(){
	return 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')'
	setTimeout(colorMe, 200)
}
function createD(){
	d3.selectAll('circle').remove()
	for(var i = 1; i <= 37; i++){
		if(i != 37){
			if(i <= 17){
			d3.select('#svg').append('circle').attr('r','30').attr('cx',500).attr('cy',(10*	i * 2 + 200).toString()
				).attr('stroke','black').attr('class', 'out').attr('fill', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')

d3.select('#svg').append('circle').attr('r','30').attr('cx',500 + Math.cos(-Math.PI/2 + (i * (Math.PI/37))) * 400).attr('cy',(10*i * 2+ 200).toString()
				).attr('stroke','black').attr('class','in').attr('fill', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')
			}
			else{
			d3.select('#svg').append('circle').attr('r','30').attr('cx',500).attr('cy',(10*	i * 2+ 200).toString()
				).attr('stroke','black').attr('class', 'out').attr('fill', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')

}
		}
	}
	}

function createTrans(){
			createD()
			d3.selectAll('circle').transition().duration(1000).each(function (d,i){
			// rgb(Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255))
			console.log(d3.select(this).attr('class'), i)
			new_i = (i+1)/2
			if (d3.select(this).attr('class') == 'in'){
				if( new_i <= 17){

d3.select(this).transition().delay(1000).duration(1000).attr('fill','red').attr('r','30').attr('cx',500 + Math.cos(-Math.PI/2 + (new_i * (Math.PI/17))) * 200).attr('cy',(10* new_i * 2+ 200).toString()
				).attr('stroke','black').attr('fill', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')
				}
				else{

d3.select(this).transition().delay(1000).duration(1000).attr('fill','red').attr('r','30').attr('cx',500 + Math.cos(-Math.PI/2 + ( (new_i-17) * (Math.PI/17))) * 200).attr('cy',(320 + 10*(new_i -17 )* 2+ 200).toString()
				).attr('stroke','black').attr('fill', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')

}
			}
			else{
				d3.select(this).transition().delay(1000).on('start', function(){d3.select(this).remove()})
			}
		})
			
	setTimeout(createTrans, 2500)

}
function changeBack(){
	d3.select('body').style('background-color', 'rgb('+Math.floor(Math.random() * 255)+','+ Math.floor(Math.random() * 255) +',' + Math.floor(Math.random() * 255) + ')')
	setTimeout(changeBack, 200)
}

setTimeout(function(){
	setTimeout(createTrans, 1000)
},500)

setTimeout(changeBack, 200)

</script>
</html>

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

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