:root {
	--four-points-star: 42.5% 32.5%, 70% 0%, 67.5% 42.5%, 100% 70%, 57.5% 67.5%, 30% 100%, 32.5% 58.5%, 0% 30%;
  --octagon: 30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%;
  --square: 35% 15%, 70% 0%, 85% 35%, 100% 70%, 65% 85%, 30% 100%, 15% 65%, 0% 30%;
}

body { 
	font-size: 72px;
}

i {
	font-style: normal;
}

ul {
	margin: 10px;
	padding: 0;
	list-style: none;
	position: absolute;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	width: 1.2em;
	z-index: 2;
	grid-gap: .3em;
}


li {
	height: .2em;
	width: .2em;
	background-color: white;
	animation: fourStarToThinOctagonAndBack 2.4s 0.3s ease-in infinite;
	clip-path: polygon(var(--four-points-star));
  transform: scale(0);
  shape-padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

sparkle {
	display: block;
	height: 80%;
	width: 80%;
	background-color: salmon;
	animation: fourStarToThinOctagonAndBack 2.4s 0.3s ease-in infinite;
	clip-path: polygon(var(--four-points-star));
  transform: scale(0);
  shape-padding: 10px;
}


li:nth-child(2) {
	grid-row-start: 3;
	grid-column-start: 2;
	animation-delay: .4s;
}

li:nth-child(2) sparkle {
	animation-delay: .4s;	
}

li:nth-child(3) {
	grid-row-start: 2;
	grid-column-start: 3;
	animation-delay: .5s;
}

li:nth-child(3) sparkle {
	animation-delay: .5s;
}

@keyframes fourStarToThinOctagonAndBack {
  40% {
    clip-path: polygon(var(--four-points-star));
    transform: scale(0) rotate(0deg);
  }
  // Optional - enhances sparkliness / dissappearness
  45% {
    clip-path: polygon(var(--four-points-star));
    transform: scale(0) rotate(45deg);
  }
  50% {
    clip-path: polygon(var(--four-points-star));
    transform: scale(0) rotate(67.5deg);
  }
  55% {
    clip-path: polygon(var(--four-points-star));
    transform: scale(1) rotate(90deg);
  }
  60% {
    clip-path: polygon(var(--four-points-star));
    transform: scale(1) rotate(135deg);
  }
  65% {
    clip-path: polygon(var(--square));
    transform: scale(1) rotate(157.5deg);
  }
  70% {
    clip-path: polygon(var(--thin-octagon));
    transform: scale(1) rotate(180deg);
  }
  75% {
    clip-path: polygon(var(--square));
    transform: scale(1) rotate(180deg);
  }
  80% {
    transform: scale(1) rotate(180deg);
  }
  85% {
    clip-path: polygon(var(--four-points-star));
    // transform: scale(1) rotate(180deg);
  }
  // Optional - enhances sparkliness / dissappearness
  90% {
    clip-path: polygon(var(--four-points-star));
    transform: scale(0) rotate(180deg);
  }
  95% {
    clip-path: polygon(var(--four-points-star));
    transform: scale(0) rotate(180deg);
  }
  100% {
    clip-path: polygon(var(--four-points-star));
    transform: scale(0) rotate(180deg);
  }
}