<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 polySwirlA = new mojs.ShapeSwirl({
  parent: ".container",
  shape: "polygon",
  fill: "blue",
  radius: 100,
  y: {
    0: 200
  },
  angle: {
    0: 720
  },
  duration: 2000,
  swirlSize: 40,
  swirlFrequency: 5,
  degreeShift: -90,
  isSwirl: true,
  repeat: 10
});

var crossSwirlA = new mojs.ShapeSwirl({
  parent: ".container",
  shape: "cross",
  stroke: "black",
  radius: 20,
  y: {
    0: 200
  },
  stroke: {
    black: "white"
  },
  angle: {
    0: 720
  },
  duration: 2000,
  swirlSize: 50,
  swirlFrequency: 10,
  direction: -1,
  degreeShift: 90,
  isSwirl: true,
  pathScale: 1,
  repeat: 10
});

var circleSwirlA = new mojs.ShapeSwirl({
  parent: ".container",
  shape: "circle",
  fill: "red",
  stroke: "black",
  radius: 20,
  y: {
    0: 200
  },
  angle: {
    0: 720
  },
  duration: 2000,
  repeat: 10
});

var circleSwirlB = new mojs.ShapeSwirl({
  parent: ".container",
  shape: "circle",
  fill: "green",
  stroke: "black",
  radius: 20,
  y: {
    0: 200
  },
  angle: {
    0: 720
  },
  duration: 2000,
  swirlSize: 20,
  swirlFrequency: 10,
  isSwirl: true,
  pathScale: 0.5,
  repeat: 10
});

document.querySelector(".play").addEventListener("click", function() {
  crossSwirlA.play();
  circleSwirlA.play();
  circleSwirlB.play();
  polySwirlA.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