body {
margin: 20px auto;
font-family: "Lato";
font-weight: 300;
width: 600px;
font-size: 1.3em;
}
.container {
perspective: 100px;
height: 300px;
}
button {
background: orange;
border: none;
color: white;
font-family: 'Lato';
padding: 10px 15px;
cursor: pointer;
outline: none;
margin: 10px;
font-weight: 300;
}
var staggerShapes = mojs.stagger(mojs.Shape);
var polygons = new staggerShapes({
quantifier: 25,
shape: 'polygon',
points: 'rand(3, 6)',
fill: ['orange', 'yellow', 'cyan', 'lightgreen'],
stroke: 'black',
radius: 'stagger(10, 1)',
left: 100,
top: 100,
x: 'stagger(0, 20)',
y: 'rand(40, 400)',
scale: {1: 'rand(0.1, 3)'},
angle: {0: 'rand(-120, 120)', easing: 'elastic.in'},
duration: 1000,
repeat: 10,
easing: 'cubic.in',
isYoyo: true,
isShowStart: true
});
document.querySelector(".play").addEventListener("click", function() {
polygons.play();
});