<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.