9_d0t_CSS2

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="A">
<line fill="none" stroke="#010101" stroke-width="10" stroke-linecap="round" x1="30" y1="60" x2="90" y2="90"/>
</g>

<g id="B">
<line fill="none" stroke="#010101" stroke-width="10" stroke-linecap="round" x1="60" y1="30" x2="60" y2="60"/>
</g>

</svg>

CSS

#svg_2 {
    visibility: hidden;
}

JavaScript

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

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