9_d0t_CSS3

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="A">
<line fill="none" stroke="#231F20" stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10" x1="30" y1="30" x2="60" y2="30"/>
</g>
<g id="a">
	<line fill="none" stroke="#bdbdbd" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="30" y1="30" x2="60" y2="30"/>
</g>

<g id="B">
	<line fill="none" stroke="#231F20" stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10" x1="60" y1="30" x2="90" y2="30"/>
</g>
<g id="b">
	<line fill="none" stroke="#bdbdbd" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="60" y1="30" x2="90" y2="30"/>
</g>

<g id="C">

</g>
<g id="c">

</g>



<g id="grid">
<circle id="1" cx="30" cy="30" r="2.5"/>
<circle id="2" cx="60" cy="30" r="2.5"/>
<circle id="3" cx="90" cy="30" r="2.5"/>
<circle id="4" cx="30" cy="60" r="2.5"/>
<circle id="5" cx="60" cy="60" r="2.5"/>
<circle id="6" cx="90" cy="60" r="2.5"/>
<circle id="7" cx="30" cy="90" r="2.5"/>
<circle id="8" cx="60" cy="90" r="2.5"/>
<circle id="9" cx="90" cy="90" r="2.5"/>
</g>

</svg>

CSS

#A {
    opacity: 0;
}

#a {
    opacity: 0.1;
}

#B {
    opacity: 0;
}

#b {
    opacity: 0.1;
}

JavaScript

$("#a").click(function() {
  if ( $('#A').css('opacity') == '0' )
    $('#A').css('opacity','1');
  else
    $('#A').css('opacity','0');
});

$("#b").click(function() {
  if ( $('#B').css('opacity') == '0' )
    $('#B').css('opacity','1');
  else
    $('#B').css('opacity','0');
});