Cacher is the code snippet organizer for pro developers

@import "compass/css3";
.grayscale {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

 .grayscale-none {
 	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
 }

.circle-wrapper {
  display: inline-block;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
  img {
    max-width: 100%;
    @extend .grayscale;
    &:hover {
      @extend .grayscale-none;
    }
  }
}

body {
  background: #222;
}

.instructions {
  color: #fff;
  position: absolute;
  text-align: center;
  width: 100%;
  top: 50%;
  margin-top: -70px;
  font-size: 20px;
  text-transform: uppercase;
}

#gif {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/mind.gif');
  width: 100%;
  height: 100px;
  top: 50%;
  margin-top: -50px;
  position: absolute;
  -moz-clip-path: url('#text-path');
  -webkit-clip-path: url(#text-path);
  clip-path: url(#text-path);
  left: 0;
  pointer-events: none;
}

#text {
  width: 100%;
  height: 136px;
  top: 50%;
  margin-top: -68px;
  position: absolute;
  left: 0;
  background: none;
  border: none;
  font-family: 'Open Sans';
  font-size: 100px;
  line-height: 60px;
  text-transform: uppercase;
  padding: 0;
  text-align: center;
  outline: none;
  box-shadow: none;
  color: #222;
}

svg {
  position: relative;
}

#text-path-text {
  top: 50%;
}
.wrapper {
}

var textPath = document.getElementById('text-path-text');
var _x = (window.innerWidth*0.5)+'px';
var _y = ((window.innerHeight*0.5)-48)+'px';
textPath.setAttribute('y', _y);
textPath.setAttribute('x', _x);

var input = document.getElementById('text');
input.addEventListener('keyup', keyupHandler);
var gif = document.getElementById('gif');

function keyupHandler() {
  var textVal = text.value;
  // for some reason updating the <text> element alone wasn't enough to trigger a re-render of the clip path so I had to replace the entire contents of the <clipPath> element.
  document.getElementById('text-path').innerHTML = '<text id="text-path-text" x="'+_x+'" y="'+_y+'" font-family="Open Sans" alignment-baseline="hanging" font-size="100px" font-weight="700" text-anchor="middle">'+textVal.toUpperCase()+'</text>';
  gif.setAttribute('clip-path', 'url(#text-path)');
}

/** I couldn't figure out how to make the text in the clipPath sit in the right place without positioning with JavaScript. If anyone knows the trick to making the text path position relative to the div that's being clipped please let me know! **/

var resize = debounce(function() {
  _x = (window.innerWidth*0.5)+'px';
  _y = ((window.innerHeight*0.5)-48)+'px';
  textPath.setAttribute('y', _y);

  textPath.setAttribute('x', _x);
}, 250); 

window.addEventListener('resize', resize);


/** Debounce function from David Walsh http://davidwalsh.name/javascript-debounce-function **/
function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};

<p class="instructions">Hover Over Grumpy &darr;</p>
<input type="text" id="text" value="TEXT">
<div id="gif">
</div>
<svg height="100px" width="100%">
    <defs>
        <clipPath id="text-path">
            <text id="text-path-text" x="0" y="0" font-family="Open Sans" alignment-baseline="hanging" font-size="100px" font-weight="700" text-anchor="middle">CAT</text>
        </clipPath>
    </defs>
</svg>
<div class="wrapper">
<div class="circle-wrapper">
  <img src="http://i0.kym-cdn.com/photos/images/newsfeed/000/406/346/fd3.jpg">
</div>
<div class="circle-wrapper">
  <img src="http://images.nymag.com/news/business/boom-brands/business130930_grumpycat_2_560.jpg">
</div>
<div class="circle-wrapper">
  <img src="http://fc00.deviantart.net/fs71/f/2013/084/0/b/0b468bb23e287b5cb6c10427b5acc06f-d5z782y.jpg">
</div>
</div>
<div class="circle-wrapper">
  <img src="http://4.bp.blogspot.com/-pdAjQ9eCKIo/UPvdDEkMbHI/AAAAAAAABag/caCx5XEHV5k/s1600/grumpy-cat-part1-2-20-092020192.png">
</div>
</div>