9_d0t

How many ways can you connect 9 dots

by Simon Aharonian

HTML

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">

<g id="grid">
<circle id="a" cx="30" cy="30" r="2.5"/>
<circle id="b" cx="60" cy="30" r="2.5"/>
<circle id="c" cx="90" cy="30" r="2.5"/>
<circle id="d" cx="30" cy="60" r="2.5"/>
<circle id="e" cx="60" cy="60" r="2.5"/>
<circle id="f" cx="90" cy="60" r="2.5"/>
<circle id="g" cx="30" cy="90" r="2.5"/>
<circle id="h" cx="60" cy="90" r="2.5"/>
<circle id="i" cx="90" cy="90" r="2.5"/>
</g>



<g id="svg_2">

		<line fill="#F5F5F6" stroke="#231F20" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="90" y1="60" x2="30" y2="30"/>
	
		<line fill="#F5F5F6" stroke="#231F20" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="90" y1="90" x2="30" y2="60"/>
	
		<line fill="#F5F5F6" stroke="#231F20" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="30" y1="90" x2="90" y2="60"/>
	
		<line fill="#F5F5F6" stroke="#231F20" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="30" y1="60" x2="90" y2="30"/>
	
		<line fill="#F5F5F6" stroke="#231F20" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="60" y1="30" x2="30" y2="90"/>
	
		<line fill="#F5F5F6" stroke="#231F20" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="90" y1="30" x2="60" y2="90"/>
	
		<line fill="#F5F5F6" stroke="#231F20" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="60" y1="30" x2="90" y2="90"/>
	
		<line fill="#F5F5F6" stroke="#231F20" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="30" y1="30" x2="60" y2="90"/>
	
		<line fill="#F5F5F6" stroke="#231F20" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="60" y1="90" x2="90" y2="60"/>
	
		<line fill="#F5F5F6" stroke="#231F20" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="30" y1="90" x2="60" y2="60"/>
	
		<line fill="#F5F5F6" stroke="#231F20" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="60" y1="60" x2="90"...

CSS

#svg_2 {
    visibility: hidden;
}

JavaScript

$("svg").click(function() {
  if ( $('#svg_2').css('visibility') == 'hidden' )
    $('#svg_2').css('visibility','visible');
  else
    $('#svg_2').css('visibility','hidden');
    
    randomLines();
});

/*
setInterval(function(){
	randomLines();
}, 300);
/*

function randomLines(){
var lines = $('#svg_2 line');

for(var i = 0; i < lines.length; i++){
	var line = lines[i];
  var rand = Math.floor((Math.random() * lines.length) + 0);
  var lineCount = Math.floor((Math.random() * 9) + 1);
  console.log(line)
	if(rand % lineCount == 0){
		$(line).show()
	}else{
		$(line).hide()
	}
	
}
}