<article>
  <div>
    <b style="--deg:10deg"></b>
    <b style="--deg:20deg"></b>
    <b style="--deg:30deg"></b>
    <b style="--deg:40deg"></b>
    <b style="--deg:50deg"></b>
    <b style="--deg:60deg"></b>
    <b style="--deg:70deg"></b>
    <b style="--deg:80deg"></b>
    <b style="--deg:90deg"></b>
    <b style="--deg:100deg"></b>
    <b style="--deg:110deg"></b>
    <b style="--deg:120deg"></b>
    <b style="--deg:130deg"></b>
    <b style="--deg:140deg"></b>
    <b style="--deg:150deg"></b>
    <b style="--deg:160deg"></b>
    <b style="--deg:170deg"></b>
    <b style="--deg:180deg"></b>
    <b style="--deg:190deg"></b>
    <b style="--deg:200deg"></b>
    <b style="--deg:210deg"></b>
    <b style="--deg:220deg"></b>
    <b style="--deg:230deg"></b>
    <b style="--deg:240deg"></b>
    <b style="--deg:250deg"></b>
    <b style="--deg:260deg"></b>
    <b style="--deg:270deg"></b>
    <b style="--deg:280deg"></b>
    <b style="--deg:290deg"></b>
    <b style="--deg:300deg"></b>
    <b style="--deg:310deg"></b>
    <b style="--deg:320deg"></b>
    <b style="--deg:330deg"></b>
    <b style="--deg:340deg"></b>
    <b style="--deg:350deg"></b>
    <b style="--deg:360deg"></b>
  </div>
  <s style="--_cp:var(--inset);--_is:12cqi;--del:100ms" class="a"></s>
  <s style="--_gc:9;--_gr:1;--_cp:var(--inset);--_bg:var(--blue-grad);--_is:30cqi;--_gs:4;--_rs:4;--del:500ms;" class="a"></s>
  <s style="--_gc:9;--_gr:9;--del:300ms;" class="c"></s>
  <s style="--_gc:3;--_gr:10;--_is:14cqi;--_cp:var(--inset);--del:300ms;--dur:4s" class="a"></s>
  <s style="--_gc:4;--_gr:11;--_is:14cqi;" class="c"></s>
  <s style="--_gc:2;--_gr:11;--del:200ms;" class="c"></s>
  <s style="--_gc:3;--_gr:12;--_is:10cqi;--del:1s;" class="c"></s>
  <s style="--_gc:7;--_gr:11;--_cp:var(--inset);--_bg:var(--blue-grad);--_is:30cqi;--_gs:4;--_rs:4" class="a"></s>
  <s style="--_gc:2;--_gr:14;--_is:10cqi;--del:800ms" class="c"></s>
  <s style="--_gc:4;--_gr:14;--_is:14cqi;--_cp:var(--inset);--del:200ms" class="a"></s>
  <h2>Preview</h2> 
</article>

@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT:wght@700&display=swap&text=preview');
*, *::after, *::before { box-sizing: border-box; }
html { display: grid; }
body {
  --antique: rgb(239, 214, 174);
  --black: rgb(41, 42, 34);
  --blue: rgb(1, 163, 148);
  --blue-grad: radial-gradient(circle at 50% 50%, hsl(174, 99%, 32%), hsl(174, 99%, 85%) 60%, hsl(174, 89%, 99%));
  --red: rgb(216, 61, 77);

  --collapsed: polygon(50% 0%, 50.15% 49.55%, 79.39% 9.55%, 50.38% 49.72%, 97.55% 34.55%, 50.48% 50%, 97.55% 65.45%, 50.38% 50.28%, 79.39% 90.45%, 50.15% 50.45%, 50% 100%, 49.85% 50.45%, 20.61% 90.45%, 49.62% 50.28%, 2.45% 65.45%, 49.52% 50%, 2.45% 34.55%, 49.62% 49.72%, 20.61% 9.55%, 49.85% 49.55%);
  --grainy: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='6.29' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --inset: polygon(50% 0%, 51.56% 30.12%, 57.82% 0.62%, 54.65% 30.61%, 65.45% 2.45%, 57.63% 31.58%, 72.70% 5.45%, 60.42% 33%, 79.39% 9.55%, 62.95% 34.84%, 85.36% 14.64%, 65.16% 37.05%, 90.45% 20.61%, 67% 39.58%, 94.55% 27.30%, 68.42% 42.37%, 97.55% 34.55%, 69.39% 45.35%, 99.38% 42.18%, 69.88% 48.44%, 100% 50%, 69.88% 51.56%, 99.38% 57.82%, 69.39% 54.65%, 97.55% 65.45%, 68.42% 57.63%, 94.55% 72.70%, 67% 60.42%, 90.45% 79.39%, 65.16% 62.95%, 85.36% 85.36%, 62.95% 65.16%, 79.39% 90.45%, 60.42% 67%, 72.70% 94.55%, 57.63% 68.42%, 65.45% 97.55%, 54.65% 69.39%, 57.82% 99.38%, 51.56% 69.88%, 50% 100%, 48.44% 69.88%, 42.18% 99.38%, 45.35% 69.39%, 34.55% 97.55%, 42.37% 68.42%, 27.30% 94.55%, 39.58% 67%, 20.61% 90.45%, 37.05% 65.16%, 14.64% 85.36%, 34.84% 62.95%, 9.55% 79.39%, 33% 60.42%, 5.45% 72.70%, 31.58% 57.63%, 2.45% 65.45%, 30.61% 54.65%, 0.62% 57.82%, 30.12% 51.56%, 0% 50%, 30.12% 48.44%, 0.62% 42.18%, 30.61% 45.35%, 2.45% 34.55%, 31.58% 42.37%, 5.45% 27.30%, 33% 39.58%, 9.55% 20.61%, 34.84% 37.05%, 14.64% 14.64%, 37.05% 34.84%, 20.61% 9.55%, 39.58% 33%, 27.30% 5.45%, 42.37% 31.58%, 34.55% 2.45%, 45.35% 30.61%, 42.18% 0.62%, 48.44% 30.12%);
  --mask-corner-cut-squares-1: conic-gradient(at calc(2*1rem) calc(2*1rem),#000 75%,rgba(0,0,0,0) 0) -1rem -1rem;
  --star: polygon(50% 0%, 52.94% 40.95%, 79.39% 9.55%, 57.69% 44.41%, 97.55% 34.55%, 59.51% 50%, 97.55% 65.45%, 57.69% 55.59%, 79.39% 90.45%, 52.94% 59.05%, 50% 100%, 47.06% 59.05%, 20.61% 90.45%, 42.31% 55.59%, 2.45% 65.45%, 40.49% 50%, 2.45% 34.55%, 42.31% 44.41%, 20.61% 9.55%, 47.06% 40.95%);

  background-color: var(--antique);
  display: grid;
  justify-content: center;
  margin: 0;
  min-height: 100dvh;
  padding: 0;
  position: relative;

  &::after {
    background: var(--grainy);
    content: "";
    display: block;
    inset: 0;
    opacity: 0.4;
    position: absolute;
  }
}
article {
  aspect-ratio: 1 / 1.5;
  background-color: var(--black);
  border-radius: 25px;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(15, 1fr);
  justify-content: center;
  margin-block: 2em 1ch;
  padding-block: 2em;
  mask: var(--mask-corner-cut-squares-1);
  -webkit-mask: var(--mask-corner-cut-squares-1);
  width: clamp(400px, 90vw, 800px);
}
div {
  --mask: repeating-conic-gradient(from 45deg at 50% 50%, var(--red) 0deg 7.5deg, transparent 7.5deg 10deg);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  grid-column: 1 / 11;
  grid-row: 1 / 11;
  inline-size: 70cqi;
  place-content: center;
  place-self: start center;
  mask: var(--mask);
  -webkit-mask: var(--mask);

  & b {
    animation: scale-up 3s ease-in-out infinite;
    background-color: var(--red);
    border-radius: 1em;
    display: block;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    height: 2cqi;
    inline-size: 70cqi;
    rotate: var(--deg);
    scale: 0;
  }
}
h2 {
  background-color: var(--antique);
  border-radius: clamp(10px, 3.5cqi, 30px);
  color: var(--black);
  font-family: 'Old Standard TT', serif;
  font-size: 10cqi;
  font-weight: 700;
  grid-column: 1 / 11;
  grid-row: 16;
  inline-size: fit-content;
  letter-spacing: -0.08em;
  line-height: 1;
  margin: 0;
  mask: var(--mask-corner-cut-squares-1);
  -webkit-mask: var(--mask-corner-cut-squares-1);
  padding: 0.2em 2ch 0 2ch;
  place-self: end center;
  & span {
    font-family: 'Libre Baskerville', serif;
    font-size: 75%;
  }
}
s {
  aspect-ratio: 1 / 1;
  background: var(--_bg, var(--red));
  clip-path: var(--_cp, var(--star));
  display: block;
  grid-column: var(--_gc, 2) / span var(--_gs, 1);
  grid-row: var(--_gr, 1) / span var(--_rs, 1);
  inline-size: var(--_is, 12cqi);
}
.a {
  animation: scale-up var(--dur, 3s) var(--del, 0s) ease-in-out infinite;
  scale: 0;
}
.c {
  animation: clip-up var(--dur, 3s) var(--del, 0s) ease-in-out infinite;
  scale: 0;
}
@keyframes clip-up {
  0% {
    opacity: 1;
    clip-path: var(--collapsed);
    scale: 0;
  }
  50% {
    clip-path: var(--star);
    scale: 1;
  }
  85% {
    opacity: 0;
  }
}
@keyframes scale-up {
  0% { scale: 0; }
  45% { scale: 1; }
  50% { opacity: 0; }
  55% { scale: 0; }
}