Fancy Gooey Cursor With jQuery, CSS3 And SVG Filters

This is a fancy, animated, interactive gooey mouse cursor built with JavaScript(jQuery), CSS/CSS3 and SVG filters.

How to use it:

1. The HTML structure for the gooey cursor.

<div class="cursor">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

2. Create the SVG filters for the gooey cursor.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="filter-name">
      <feGaussianBlur
        in="SourceGraphic"
        stdDeviation="15"
        result="my-blur" />
      <feColorMatrix
        in="my-blur"
        mode="matrix"
        values="
                1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 20 -8"
        result="my-gooey" />
    </filter>
  </defs>
</svg>

3. The required CSS/CSS3 styles for the gooey cursor. Note that the SVG Filters should be applied to the cursor container.

.cursor {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-filter: url("#filter-name");
  filter: url("#filter-name");
}

.dot {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  background: #EEEEEE;
  border-radius: 40px;
  transition: ease .1s;
  pointer-events: none;
}

.dot:nth-child(5){
  background: #9C27B0;
  transition: ease .1s;
  transform: scale(1);
}

.dot:nth-child(4){
  background: #B037AD;
  transition: ease .12s;
  transform: scale(.8);
}

.dot:nth-child(3){
  background: #C245AA;
  transition: ease .14s;
  transform: scale(.6);
}

.dot:nth-child(2){
  background: #D252A7;
  transition: ease .16s;
  transform: scale(.4);
}

.dot:nth-child(1){
  background: #E35FA4;
  transition: ease .18s;
  transform: scale(.2);
}

4. Optionally, you can also load filters from external SVGs.

.cursor {
  width: 100%;
  height: 100%;
  overflow: hidden;
  filter: url('filters.svg#filter-name');
}

5. Insert the latest version of jQuery library into the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

6. The JavaScript (jQuery script) to track the mouse position and activate the gooey cursor.

$(document).mousemove(function(e){
  //Get 'container' offset:
  o = $('.cursor').offset();
  //Track mouse position:
  $(".dot").css({
    "top": e.pageY - o.top,
    "left": e.pageX - o.left
  });
});

---

This awesome jQuery plugin is developed by tobiasdev. For more Advanced Usages, please check the demo page or visit the official website.