body
{
  background: #222;
}
const burst = new mojs.Burst
({
    radius: { 0: 360},
    count: 20,
    children: 
    {
      stroke: {"#4F297C" : "#00000"},
      shape: "cross",
      strokeWidth: { 6: 0},
      angle: {360: 0},
      radius: { 30: 5},
      duration: 3000
    }
});

const burst2 = new mojs.Burst
({
    radius: { 0: 360},
    count: 10,
    children: 
    {
      stroke: {"#5D5D5D" : "#00000"},
      shape: "cross",
      strokeWidth: { 6: 0},
      angle: {360: 0},
      radius: { 30: 5},
      duration: 3000
    }
});

const burst3 = new mojs.Burst
({
    radius: { 0: 500},
    count: 5,
    children: 
    {
      stroke: {"#FFFFFF" : "#00000"},
      fill: "none",
      points: 6,
      shape: "zigzag",
      strokeWidth: { 6: 0},
      angle: {360: 0},
      radius: { 30: 5},
      duration: 3000
    }
});

const circ_obj = 
{
  radius: {0: 200},
  fill: "none",
  stroke: "#FFFFFF",
  opacity: {1: 0},
  duration: 3500
};

const circ = new mojs.Shape
({
  ...circ_obj
});

const circ2 = new mojs.Shape
({
  ...circ_obj,
  stroke: "#4F297C",
  delay: 500
});

const spinner = new mojs.Shape
({
    stroke: {"#4F297C" : "#00000"},
    shape: "cross",
    fill: "none",
    strokeWidth: { 6: 0},
    angle: {360: 0},
    radius: { 5: 30},
    duration: 3000
});

const burst4 = new mojs.Burst
({
    radius: { 0: 1000},
    count: 5,
    children: 
    {
      fill: {"#000000" : "#4F297C"},
      shape: "circle",
      strokeWidth: { 3: 0},
      angle: {180: 0},
      radius: {30: 5},
      duration: 3500
    }
});

const timeline = new mojs.Timeline
({
      onComplete () { this.replay(); }
})
.add(burst, burst2, burst3, burst4, circ, circ2, spinner)
.play();
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.265.6/mo.min.js