<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.