let a = {
    fill: 'none',
    radius: 25,
    strokeWidth: {50: 0},
    scale: {0: 1},
    duration: 500,
    left: 0,
    top: 0,
    easing: 'cubic.out'
  }
  const main = new mojs.Shape({
    ...a,
    stroke: 'cyan',
  })
  const smallCircles = []
  const colors = ['deeppink', 'magenta', 'yellow', '#00F87F']
  for (let i = 0; i < colors.length; i++) {
    smallCircles.push(new mojs.Shape({
      ...a,
      parent: main.el,
      strokeWidth: {30: 0},
      left: '50%',
      top: '50%',
      stroke: colors[i],
      delay: 'rand(0,350)',
      x: 'rand(-50,50)',
      y: 'rand(-50,50)',
      radius: 'rand(5, 20)'
    }))
  }
  document.addEventListener('click', e => {
    // 这种是中心点
    main.tune({x: e.pageX, y: e.pageY}).replay()
    //剩下的四个是随机的
    for (let i = 0; i < smallCircles.length; i++) {
      smallCircles[i].generate().replay();
    }
  })
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/mojs/0.265.6/mo.min.js