Этот скрипт создает два круговых элемента анимации с использованием библиотеки mojs. При клике на документе, позиция двух кругов анимируется к месту щелчка на странице, а затем они появляются и исчезают быстро.

для начала подключаем библиотеку файлы прикреплены к данной статье

Код
<script src='/js/mo.min.js'></script>
<script src='/js/mojs-player.min.js'></script>


Код
<script>'use strict';
  var _extends = Object.assign || function (target) {
  for (var i = 1; i < arguments.length; i++) {
  if (window.CP.shouldStopExecution(2)) {
  break;
  }
  var source = argumentsi];
  for (var key in source) {
  if (window.CP.shouldStopExecution(1)) {
  break;
  }
  if (Object.prototype.hasOwnProperty.call(source, key)) {
  targetkey] = sourcekey];
  }
  }
  window.CP.exitedLoop(1);
  }
  window.CP.exitedLoop(2);
  return target;
  };

  var OPTS = {
  fill: 'none',
  radius: 25, // Указываем общий радиус
  strokeWidth: {
  50: 0
  },
  scale: {
  0: 1
  },
  angle: {
  'rand(-35, -70)': 0
  },
  duration: 500,
  left: 0,
  top: 0,
  easing: 'cubic.out'
  };

  var circle1 = new mojs.Shape(_extends({}, OPTS, {
  stroke: '#aaffaa' // Указываем цвет большого круга
  }));

  var circle2 = new mojs.Shape(_extends({}, OPTS, {
  radius: {
  0: 15
  },
  strokeWidth: {
  30: 0
  },
  stroke: '#1BBB6B', // Указываем цвет малого круга
  delay: 'rand(75, 150)'
  }));

  document.addEventListener('click', function (e) {
  circle1.tune({
  x: e.pageX,
  y: e.pageY
  }).replay();

  circle2.tune({
  x: e.pageX,
  y: e.pageY
  }).replay();
setTimeout(function(){$('data-name="mojs-shape"]').fadeIn('fast')});
  setTimeout(function(){$('data-name="mojs-shape"]').fadeOut('fast')},500);
  });</script>


если нужны рандомные цвета то стоит прописать данный код

Код
<script>'use strict';

var _extends = Object.assign || function (target) {
  for (var i = 1; i < arguments.length; i++) {
  if (window.CP.shouldStopExecution(2)) {
  break;
  }
  var source = argumentsi];
  for (var key in source) {
  if (window.CP.shouldStopExecution(1)) {
  break;
  }
  if (Object.prototype.hasOwnProperty.call(source, key)) {
  targetkey] = sourcekey];
  }
  }
  window.CP.exitedLoop(1);
  }
  window.CP.exitedLoop(2);
  return target;
};

var OPTS = {
  fill: 'none',
  radius: 25, // Указываем общий радиус
  strokeWidth: {
  50: 0
  },
  scale: {
  0: 1
  },
  angle: {
  'rand(-35, -70)': 0
  },
  duration: 500,
  left: 0,
  top: 0,
  easing: 'cubic.out'
};

var circle1 = new mojs.Shape(_extends({}, OPTS, {
  stroke: randomColor() // Указываем цвет большого круга
}));

var circle2 = new mojs.Shape(_extends({}, OPTS, {
  radius: {
  0: 15
  },
  strokeWidth: {
  30: 0
  },
  stroke: randomColor(), // Указываем цвет малого круга
  delay: 'rand(75, 150)'
}));

document.addEventListener('click', function (e) {
  circle1.tune({
  x: e.pageX,
  y: e.pageY
  }).replay();

  circle2.tune({
  x: e.pageX,
  y: e.pageY
  }).replay();
  setTimeout(function () {
  $('data-name="mojs-shape"]').fadeIn('fast');
  });
  setTimeout(function () {
  $('data-name="mojs-shape"]').fadeOut('fast');
  }, 500);
});

// Функция для генерации случайного цвета
function randomColor() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16);
};</script>