Fancy Gooey Cursor With jQuery, CSS3 And SVG Filters

File Size: 1.74 KB
Views Total: 4482
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

2. Create the SVG filters for the gooey cursor.

<svg xmlns="" version="1.1">
    <filter id="filter-name">
        result="my-blur" />
                1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 20 -8"
        result="my-gooey" />

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;

  background: #9C27B0;
  transition: ease .1s;
  transform: scale(1);

  background: #B037AD;
  transition: ease .12s;
  transform: scale(.8);

  background: #C245AA;
  transition: ease .14s;
  transform: scale(.6);

  background: #D252A7;
  transition: ease .16s;
  transform: scale(.4);

  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="" 

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

  //Get 'container' offset:
  o = $('.cursor').offset();
  //Track mouse position:
    "top": e.pageY -,
    "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.