Untitled

dabblet.css

.pagination {
  position: relative;
  padding: 10em;
  background: #fff;
  -webkit-filter: contrast(10);
}

.dot {
  position: absolute;
  line-height: 10em;
  margin-left: 10px;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #000;
  -webkit-filter: blur(5px);
  opacity: 0;
  top: 10em;
  left: 10em;
  cursor: pointer;
  -webkit-transition: all .5s ease-in-out;
}

.pagination a {
  display: inline-block;
  line-height: 10em;
  margin-left: 1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  -webkit-filter: blur(5px);
}

dabblet.html

<div class="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<span class="dot"></span>
</div>

<p>via: <a href="http://css-tricks.com/shape-blobbing-css/" target="_blank">http://css-tricks.com/shape-blobbing-css</a>

dabblet.js

var dot = document.querySelector('.dot');
Array.prototype.slice.call(document.querySelectorAll('a')).forEach(function(a, i) {
  a.addEventListener('mouseover', (function(i) {
    return function() {
      dot.style.opacity = 1;
      var x = i == 0 ? 0 : (i - 1)*3 + 4;
      dot.style.webkitTransform = 'translate3d(' + x + 'em, 0, 0)';
    }
  })(i), false);
});

settings.json

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