9_d0t_xerxes

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="lines">
        <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"...

CSS

#lines {
    visibility: hidden;
}

JavaScript

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


var d = 0
setInterval(function(){
	d += 0.035
	randomLines(d);
  if (d > 1) d = 0;
}, 100);


function randomLines(density){
	var lines = $('#lines line');
  var amountOfLinesToMakeVisible = Math.floor(28 * density);
  var linesToShow = shuffle(lines);
  linesToShow.each(function(index, line){
	  $(line).hide()
    if (index - 1 < amountOfLinesToMakeVisible) $(line).show()
  })
}

function shuffle(array) {
  var clone = array.slice();
  var currentIndex = clone.length, temporaryValue, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = clone[currentIndex];
    clone[currentIndex] = clone[randomIndex];
    clone[randomIndex] = temporaryValue;
  }
  return clone;
}