<div role="img" aria-label="A cartoon of a shiny diamond"></div>
div {
--color: #def;
width: 38vmin;
height: 42vmin;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background:
linear-gradient(-60deg, var(--color) 50%, transparent 0) 0 0 / 6vmin 10vmin,
linear-gradient(60deg, var(--color) 50%, transparent 0) 5.9vmin 0 / 6vmin 10vmin,
linear-gradient(60deg, transparent 50%, var(--color) 0) 6.5vmin 0 / 6vmin 10vmin,
linear-gradient(-60deg, transparent 50%, var(--color) 0) 12.4vmin 0 / 6vmin 10vmin,
linear-gradient(-60deg, var(--color) 50%, transparent 0) 13vmin 0 / 6vmin 10vmin,
linear-gradient(60deg, var(--color) 50%, transparent 0) 18.9vmin 0 / 6vmin 10vmin,
linear-gradient(60deg, transparent 50%, var(--color) 0) 19.5vmin 0 / 6vmin 10vmin,
linear-gradient(-60deg, transparent 50%, var(--color) 0) 25.4vmin 0 / 6vmin 10vmin,
linear-gradient(-60deg, var(--color) 50%, transparent 0) 26vmin 0 / 6vmin 10vmin,
linear-gradient(60deg, var(--color) 50%, transparent 0) 31.9vmin 0 / 6vmin 10vmin,
linear-gradient(var(--color), var(--color)) 0 10.5vmin / 12.125vmin 1vmin,
linear-gradient(var(--color), var(--color)) 12.75vmin 10.5vmin / 12.5vmin 1vmin,
linear-gradient(var(--color), var(--color)) 25.9vmin 10.5vmin / 12.125vmin 1vmin,
conic-gradient(at 100% 100%, transparent 0 328.5deg, var(--color) 0 348deg, transparent 0) 0 12vmin / 18.5vmin 30vmin,
conic-gradient(at 50% 100%, var(--color) 11.75deg, transparent 0 348.25deg, var(--color) 0) 12.75vmin 12vmin / 12.5vmin 30vmin,
conic-gradient(at 0% 100%, transparent 0 12deg, var(--color) 0 31.5deg, transparent 0) 19.5vmin 12vmin / 18.5vmin 30vmin
;
background-repeat: no-repeat;
}
@keyframes shine {
0% { transform: scale(0); opacity: 1; }
10%, 100% { transform: scale(400%); opacity: 0; }
}
div::before,
div::after {
--color: yellow;
content: "";
display: block;
position: absolute;
left: 95%;
top: 20%;
border-radius: 50%;
width: 4vmin;
height: 4vmin;
background:
radial-gradient(farthest-side at 0% 0%, transparent 99.9%, var(--color) 0) 0 0 / 50% 50%,
radial-gradient(farthest-side at 100% 0%, transparent 99.9%, var(--color) 0) 100% 0 / 50% 50%,
radial-gradient(farthest-side at 0% 100%, transparent 99.9%, var(--color) 0) 0 100% / 50% 50%,
radial-gradient(farthest-side at 100% 100%, transparent 99.9%, var(--color) 0) 100% 100% / 50% 50%
;
background-repeat: no-repeat;
animation: shine 5s infinite;
}
div::after {
--color: pink;
top: 5%;
left: 20%;
animation-delay: -3s;
animation-timing-function: linear;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.