JSFiddle - React, Tailwind, and code Playground

by lollero

CSS

html, body {
  min-width: 100%;
  height: 100%;
  background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
  position: relative;
  z-index: -2;
}

.bg-circle {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  border-radius: 100px;
  margin: -50px 0 0 -50px;
  width: 100px;
  height: 100px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: repeat; 
  opacity: .9;
  transition: all 500ms linear;
  background-image: url(data:image/svg+xml;base64,ICA8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxMDAlIj4gICAgPGRlZnM+ICAgICAgPHN0eWxlPi5jbHMtMXtzdHJva2U6IzIzMWYyMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtmaWxsOnVybCgjbGluZWFyLWdyYWRpZW50KTt9PC9zdHlsZT4gICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9IjI4MC41MiIgeTE9IjAuNSIgeDI9IjI4MC41MiIgeTI9IjU2MC41NSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPiAgICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZjA4ZjQ4Ii8+ICAgICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNlYTY0NmEiLz4gICAgICA8L2xpbmVhckdyYWRpZW50PiAgICA8L2RlZnM+ICAgIDxyZWN0IGNsYXNzPSJjbHMtMSIgZmlsdGVyPSJ1cmwoI2JnLWZpbHRlcikiIHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+ICAgIDxkZWZzPiAgICAgICA8c3R5bGU+LmNscy0yeyBmaWxsOiAjZmZmOyBvcGFjaXR5OiAwLjQ7IH0gLmNscy0zeyBmaWxsOiNmZmY7IH08L3N0eWxlPiAgICAgIDxwYXR0ZXJuIGlkPSJ0cmFuc3BhcmVuY3ktZ3JpZCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4gICAgICAgIDxyZWN0IGNsYXNzPSJjbHMtMiIgeD0iMCIgeT0iMCIgd2lkdGg9IjkiIGhlaWdodD0iOSIvPiAgICAgICAgPHJlY3QgY2xhc3M9ImNscy0zIiB4PSI5IiB5PSIwIiB3aWR0aD0iOSIgaGVpZ2h0PSI5Ii8+ICAgICAgICA8cmVjdCBjbGFzcz0iY2xzLTIiIHg9IjkiIHk9IjkiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiLz4gICAgICAgIDxyZWN0IGNsYXNzPSJjbHMtMyIgeD0iMCIgeT0iOSIgd2lkdGg9IjkiIGhlaWdodD0iOSIvPiAgICAgIDwvcGF0dGVybj4gICAgPC9kZWZzPiAgICA8cmVjdCBmaWxsPSJ1cmwoI3RyYW5zcGFyZW5jeS1ncmlkKSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPiAgICAgIDwvc3ZnPg==);
}

JavaScript

var svgNS = "http://www.w3.org/2000/svg";

$('body').mousemove(function(e) {
  event.preventDefault();
  var x = e.clientX;
  var y = e.clientY;

  var circle = $('<div class="bg-circle"></div>').appendTo('body');
  circle.css({
  	top: y,
    left: x
  });

  setTimeout(function() {
    circle.css({ opacity: 0, width: 10, height: 10 });
    setTimeout(function() {
      circle.remove();
    }, 400);
  }, 400);
});