9_d0t_CSS

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

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

</g>

</svg>

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');
});