Untitled

dabblet.css

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  }
  
html, body {
	height: 100%;
	}
 
body {
	text-align: center;	
  background: linear-gradient(#111,#222,#111);
	}
	body:before {
		content: '';
		height: 100%;
		display: inline-block;
		vertical-align: middle;
		}
  
.container {
	width: 5em;
	height: 5em;
  overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	border-radius: 50%;
	transition: .3s;
	}
	.container:hover {
		width: 25em;
		height: 25em;	
  overflow: visible
		}
	
.plank {
	position: absolute;
	}
	.tall {
		height: 100%;
    width: 5em;
		top: 0;
		left: 50%;
		margin-left: -2.5em;
  transition: transform 1s;
  transform: rotate(-90deg)
		}
.container:hover .tall {
  transform: rotate(0deg)
  }

	.diag-r {
  transition: transform .99s;
  transform: rotate(-90deg)
		}
.container:hover .diag-r {
  transform: rotate(45deg)
  }
	.diag-l {
  transition: transform 1.2s;
  transform: rotate(-135deg);
		}
  
.container:hover .diag-l {
  transform: rotate(-45deg)
  }
	.long {
		width: 100%;
		height: 5em;
		top: 50%;
		margin-top: -2.5em;
  transition: 1.1s;
  transform: rotate(-135deg);
		}
.container:hover .long {
    transform: none;
    }
.icon {
  position: absolute;
	height: 5em;
	width: 5em;
  border-radius: 50%;
	background: skyblue;
	}
.long .icon:first-of-type {
left: 0;  
}
.long .icon:last-of-type {
right: 0;  
}
	.tall .icon:last-of-type {
		bottom: 0;
		}

dabblet.html

<div class="container">

	<div class="plank tall">
		<div class="icon"></div>
		<div class="icon"></div>
	</div>
	
	<div class="plank long">
		<div class="icon"></div>
		<div class="icon"></div>
	</div>
	
	<div class="plank tall diag-r">
		<div class="icon"></div>
		<div class="icon"></div>
	</div>
	
	<div class="plank tall diag-l">
		<div class="icon"></div>
		<div class="icon"></div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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