JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
  <svg width="100%" height="100%" @mousemove="mousemove">
    <defs>
      <filter id="f" filterUnits="userSpaceOnUse">
        <feColorMatrix type="saturate" values="0" />
      </filter>
      <mask id="m" maskUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
        <circle id="c" :cx="cx" :cy="cy" :r="r" fill="white" stroke-width="1" stroke="red" />
      </mask>
    </defs>
    <image filter="url(#f)" width="100%" height="100%" :xlink:href="url" />
    <image mask="url(#m)" width="100%" height="100%" :xlink:href="url" />
  </svg>
</div>

CSS

html, body, #app {
  height: 100%;
}

body {
  margin: 0;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    url: 'http://i.imgur.com/B9OZWcg.jpg',
    cx: 0,
    cy: 0,
    r: 0,
  },
  mounted: function() {
    var self = this;
    setInterval(function() {
      if (self.r > 0) {
        self.r = ~~(self.r * 0.95);
      }
    }, 40);
  },
  methods: {
    mousemove: function(e) {
      this.cx = e.clientX;
      this.cy = e.clientY;
      this.r = this.r < 5 ? 5 : this.r + 1;
    },
  },
});