const shapeSwirl = new mojs.ShapeSwirl({
    fill:           '#F64040',
    y:              { 0: -150 },
     swirlSize:      25,//正弦的偏差或幅度
    left:"20%",
    duration:       2000,
 pathScale:      .5,//默认1,正弦路径的比例大小,将正弦缩小原来半径的一半
   swirlFrequency:10,// 默认是3,正弦频率
   degreeShift: 90,//定义漩涡的角度
  })
  const OPTS = {
    left: 0, top: 0,
    fill: '#F93E39',
    duration: 'rand(600, 1000)',//时间
    radius: 'rand(10, 20)',//半径
    pathScale: 'rand(.5, 1)',//半径缩小原来半径的倍数
    swirlFrequency: 'rand(2,4)',//正弦频率
    swirlSize: 'rand(6,14)',//正弦幅度峰值
  }

  const swirl1 = new mojs.ShapeSwirl({
    ...OPTS
  })

  const swirl2 = new mojs.ShapeSwirl({
    ...OPTS,
    direction: -1
  })

  const swirl3 = new mojs.ShapeSwirl({
    ...OPTS
  })

  const swirl4 = new mojs.ShapeSwirl({
    ...OPTS
  })
  document.addEventListener('click', e => {
 const x = e.pageX,
      y = {[e.pageY]: e.pageY - 150};

    [swirl1, swirl2, swirl3, swirl4].forEach(val => {
      val.tune({x, y}).replay()
    })
    shapeSwirl.replay()
  })