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();
})
This Pen doesn't use any external CSS resources.