Untitled

dabblet.css

html, body { height:100%; font-size:300px }
nav { width:1em; height:1em; margin:auto; position:relative; margin-top:15%;
  background:url(http://dump.fm/avatars/20110625/1309026793173-dumpfm-hexagon-pentagon.png) no-repeat;
  background-size:100%; border:solid   }

a { width:.8em; height:0; display:block; transition:250ms;
	position:absolute; top:0; left:0; transform-origin:top center; background:transparent;
	border:solid; border-color:blue transparent; border-width:0 .1em .3em;
	 }
	
a:nth-child(1) { transform:translate(0,1em) rotate(180deg) }
a:nth-child(2) {  }
a:nth-child(3) { transform:translate(.7em, .8em) rotate(-251deg); background:red }
a:nth-child(4) { transform:translate(.13em, .4em); background:teal }
a:nth-child(5) { transform:translate(-.4em, .29em) rotate(-72deg); background:green }
	
		
* { padding:0; margin:0 }

dabblet.html

<nav>
 <a href="/"></a>
 <a href=services></a>
 <a href=education></a>
 <a href=research></a>
 <a href=join></a>
</nav>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}