const a = {
    fill:           'none',
    radius:         25,
    strokeWidth:    { 50 : 0 },
    scale:          { 0: 1 },
    angle:          { 'rand(-35, -70)': 0 },
    duration:       500,
    left: 0,        top: 0,
    easing: 'cubic.out'
  };
  const b = new mojs.Shape({
    ...a,
    stroke:         'cyan',
  });
  const c = new mojs.Shape({
    ...a,
    radius:         { 0 : 15 },
    strokeWidth:    { 30: 0 },
    stroke:         'magenta',
    delay:          'rand(75, 150)'
  });
 const d=new mojs.Shape({
    shape:'circle',
    radius:25,
    duration:500,
    y:-100
  }).then({
    y:100
  });
  document.addEventListener('click',e=>{
    b.tune({ x: e.pageX, y: e.pageY  }).replay();
    c.tune({ x: e.pageX, y: e.pageY  }).replay();
        //100=>0=>100
    d.tune({y:{100:0}}).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