Untitled

dabblet.css

html,body {
  margin: 0;
  min-height: 100%;
}

body:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  margin-left: -1px;
  border-left: 1px solid blue;
  height: 100%;
}

body:before {
  content: "";
  position: absolute;
  z-index: 1;
  border-top: 1px solid blue;
  top: 50%;
  margin-top: -1px;
  width: 100%;
}

.dot {
  position: absolute;
  top: calc(50% - 1em);
  left: calc(50% - 1em);
  width: 0;
  height: 0;
  border: 1em solid blue;
  margin: 0;
  border-radius: 50%;
  background: blue;
  transition: all .5s;
}

.dot:hover {
  width: 10em;
  height: 10em;
  border-width: 1px;
  background: transparent;
  margin: -4em 0 0 -4em;
}

dabblet.html

<div class="dot" />

dabblet.js

// alert('Hello world!');

settings.json

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