sparkle.svg

<svg id="tile" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes leftX {
  0% {
    transform: translateX(120px);
  }
  14.2857142857% {
    transform: translateX(450px);
  }
  28.5714285714% {
    transform: translateX(230px);
  }
  42.8571428571% {
    transform: translateX(20px);
  }
  57.1428571429% {
    transform: translateX(373px);
  }
  71.4285714286% {
    transform: translateX(480px);
  }
  85.7142857143% {
    transform: translateX(80px);
  }
}
@keyframes topY {
  0% {
    transform: translateY(140px);
  }
  9.0909090909% {
    transform: translateY(70px);
  }
  18.1818181818% {
    transform: translateY(380px);
  }
  27.2727272727% {
    transform: translateY(475px);
  }
  36.3636363636% {
    transform: translateY(200px);
  }
  45.4545454545% {
    transform: translateY(20px);
  }
  54.5454545455% {
    transform: translateY(310px);
  }
  63.6363636364% {
    transform: translateY(130px);
  }
  72.7272727273% {
    transform: translateY(410px);
  }
  81.8181818182% {
    transform: translateY(176px);
  }
  90.9090909091% {
    transform: translateY(250px);
  }
}
.pop {
  animation: pop 0.5s infinite linear;
  transform-origin: 50% 50%;
  width: 50px;
}

@keyframes pop {
  0% {
    transform: scale(0.1) rotate(0deg);
  }
  33.33% {
    transform: scale(1.3) rotate(30deg);
  }
  100% {
    transform: scale(0.1) rotate(110deg);
  }
}
/*  hi */
.playground {
  width: 500px;
  height: 500px;
  outline: 1px red dashed;
  float: left;
}

.y-axis {
  height: 20px;
  width: 20px;
  position: relative;
  animation: topY 5.5s steps(1) infinite;
}

.x-axis {
  height: 20px;
  width: 20px;
  position: relative;
  animation: leftX 3.5s steps(1) infinite;
}

body {
  background: #123;
}

#tile {
  width: 500px;
  outline: 1px green dashed;
}

h4 {
  color: #efc;
}
  </style>
  <defs>
    

    <symbol id="star">
      <image href="https://gistcdn.githack.com/alexmwalker/c29eec18fbf6e81932125119c184295c/raw/e5f5eb5620b978de600abda85257021ea343be38/star.svg" height="25" width="25" />
    </symbol>

  </defs>

  <g class="y-axis">
    <svg class="y-position" x="0" width="25px" height="25px" style="overflow: visible; transform-origin: 50% 50%;">
      <g class="x-axis">
        <use href="#star"  class="pop" width="50px" height="50px" x="0" y="0" />
      </g>
    </svg>
  </g>

</svg>