@property --c {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 110%;
}

@property --c2 {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes credits {
  to {
    --c: -10%;
    --c2: 1;
  }
}

:root {
  --primary: #00fcff;
  --secondary: #ff00e1;
}

.avatar {
  width: 30vmin;
  aspect-ratio: 1;
  animation: credits 3s linear infinite;
  clip-path: var(--shape);
  padding: 3vmin;
  background: color-mix(in srgb, var(--primary), black 70%);
  display: grid;
  place-items: center;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(
      from 180deg,
      var(--primary) var(--c),
      var(--secondary) calc(var(--c) + 4%),
      transparent calc(var(--c) + 10%)
    );
  }
  /*   box-shadow: inset 10px 10px 4px black; */
  &:after {
    font-size: 4vmin;
    content: "⋆˙⟡";
    background: var(--primary);
    padding: 0.25rem 0.5rem;
    position: absolute;
    bottom: 0.25vmin;
    clip-path: var(--shape);
  }
}
img {
  width: 100%;
  object-fit: cover;
  clip-path: var(--shape);
}

.preview {
  position: relative;

  &:before, &:after {
z-index: 1;
    content: "";
    position: absolute;
    inset: 14vmin;
    translate: -4.25vmin -4.4vmin;
    aspect-ratio: 1;
    border-radius: 1rem;

    background: conic-gradient(var(--primary), transparent);
    animation: eye 3s linear infinite;
  }
  
  &:after { 
     translate: 3.25vmin -4.4vmin;
  }
}
@keyframes eye {
  from {
    rotate: 0;
  }
  
  50% {
    filter: blur(.2rem);
  }
    
  to {
    rotate: 360deg;
  }
  
}
body {
  height: 100dvh;
  display: grid;
  place-items: center;
  background: #111;
  filter: drop-shadow(
    0 0 12vmin
      color-mix(
        in srgb,
        var(--primary),
        transparent calc(40% + 50% * var(--c2))
      )
  );
  animation: credits 3s linear infinite;
}

:root {
  --shape: polygon(
    98.66024% 45%,
    99.39693% 46.5798%,
    99.84808% 48.26352%,
    100% 50%,
    99.84808% 51.73648%,
    99.39693% 53.4202%,
    98.66025% 55%,
    78.66025% 89.64102%,
    77.66044% 91.06889%,
    76.42788% 92.30146%,
    75% 93.30127%,
    73.4202% 94.03794%,
    71.73648% 94.48909%,
    70% 94.64102%,
    30% 94.64102%,
    28.26352% 94.48909%,
    26.5798% 94.03794%,
    25% 93.30127%,
    23.57212% 92.30146%,
    22.33956% 91.06889%,
    21.33975% 89.64102%,
    1.33975% 55%,
    0.60307% 53.4202%,
    0.15192% 51.73648%,
    0% 50%,
    0.15192% 48.26352%,
    0.60307% 46.5798%,
    1.33975% 45%,
    21.33975% 10.35898%,
    22.33956% 8.93111%,
    23.57212% 7.69854%,
    25% 6.69873%,
    26.5798% 5.96206%,
    28.26352% 5.51091%,
    30% 5.35898%,
    70% 5.35898%,
    71.73648% 5.51091%,
    73.4202% 5.96206%,
    75% 6.69873%,
    76.42788% 7.69854%,
    77.66044% 8.93111%,
    78.66025% 10.35898%
  );
}