<div id="sparkle"></div>
#sparkle {
  width: 250px;
  aspect-ratio: 1;
  display: grid;
  filter: drop-shadow(0 0 5px gold)
}
#sparkle:before,
#sparkle:after{
  content:"";
  grid-area: 1/1;
  clip-path: polygon(79.39% 90.45%,50.00% 75.00%,20.61% 90.45%,26.22% 57.73%,2.45% 34.55%,35.31% 29.77%,50.00% 0.00%,64.69% 29.77%,97.55% 34.55%,73.78% 57.73%);
  background: 
    repeating-radial-gradient(#000 0 0.00015%,gold 0 0.0002%) 
    60% 60%/3000px 3000px,
    repeating-conic-gradient(#000 0 0.0001%,gold 0 0.0002%) 
    40% 40%/3000px 3000px;
  background-blend-mode: difference;
  animation: s 1s infinite;
}
#sparkle:after { 
  scale: 1.65;
  clip-path: polygon(79.39% 90.45%,50.00% 75.00%,20.61% 90.45%,26.22% 57.73%,2.45% 34.55%,35.31% 29.77%,50.00% 0.00%,64.69% 29.77%,97.55% 34.55%,73.78% 57.73%,79.39% 90.45%,50.00% 75.00%,calc(50.00% - 0.00px) calc(75.00% - 10.00px),calc(79.39% - 11.76px) calc(90.45% - 16.18px),calc(73.78% - 9.51px) calc(57.73% - 3.09px),calc(97.55% - 19.02px) calc(34.55% - -6.18px),calc(64.69% - 5.88px) calc(29.77% - -8.09px),calc(50.00% - -0.00px) calc(0.00% - -20.00px),calc(35.31% - -5.88px) calc(29.77% - -8.09px),calc(2.45% - -19.02px) calc(34.55% - -6.18px),calc(26.22% - -9.51px) calc(57.73% - 3.09px),calc(20.61% - -11.76px) calc(90.45% - 16.18px),calc(50.00% - 0.00px) calc(75.00% - 10.00px),calc(79.39% - 11.76px) calc(90.45% - 16.18px));
}
@keyframes s {
  to {background-position: 60.2% 59%,40.5% 39.8%}
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background:  #000;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.