9_d0t_CSS4

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

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

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

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

<g id="G">
	<line fill="none" stroke="#231F20" stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10" x1="30"...

CSS

#A {
    opacity: 0;
}

#a {
    opacity: 0.1;
}

#B {
    opacity: 0;
}

#b {
    opacity: 0.1;
}

#C {
    opacity: 0;
}

#c {
    opacity: 0.1;
}

#D {
    opacity: 0;
}

#d {
    opacity: 0.1;
}

#E {
    opacity: 0;
}

#e {
    opacity: 0.1;
}

#F {
    opacity: 0;
}

#f {
    opacity: 0.1;
}

#G {
    opacity: 0;
}

#g {
    opacity: 0.1;
}

#H {
    opacity: 0;
}

#h {
    opacity: 0.1;
}

#I {
    opacity: 0;
}

#i {
    opacity: 0.1;
}

#J {
    opacity: 0;
}

#j {
    opacity: 0.1;
}

#K {
    opacity: 0;
}

#k {
    opacity: 0.1;
}

#L {
    opacity: 0;
}

#l {
    opacity: 0.1;
}

#M {
    opacity: 0;
}

#m {
    opacity: 0.1;
}

#N {
    opacity: 0;
}

#n {
    opacity: 0.1;
}

#O {
    opacity: 0;
}

#o {
    opacity: 0.1;
}

#P {
    opacity: 0;
}

#p {
    opacity: 0.1;
}

#Q {
    opacity: 0;
}

#q {
    opacity: 0.1;
}

#R {
    opacity: 0;
}

#r {
    opacity: 0.1;
}

#S {
    opacity: 0;
}

#s {
    opacity: 0.1;
}

#T {
    opacity: 0;
}

#t {
    opacity: 0.1;
}

#U {
    opacity: 0;
}

#u {
    opacity: 0.1;
}

#V {
    opacity: 0;
}

#v {
    opacity: 0.1;
}

#W {
    opacity: 0;
}

#w {
    opacity: 0.1;
}

#X {
    opacity: 0;
}

#x {
    opacity: 0.1;
}

#Y {
    opacity: 0;
}

#y {
    opacity: 0.1;
}

#Z {
    opacity: 0;
}

#z {
    opacity: 0.1;
}

#Z1 {
    opacity: 0;
}

#z1 {
    opacity: 0.1;
}

#Z2 {
    opacity: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

$("#n").click(function() {
  if ( $('#N').css('opacity') == '0' )
    $('#N').css('opacity','1');
  else
   ...