<button class="play">Play</button>
<div class="container">
</div>
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();
});

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.2/mo.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js