별색

<div class="row">
  <div class="chip"><div class="dots"><span class="pat"></span></div><span class="cap">process</span></div>
  <div class="chip"><div class="solid"></div><span class="cap">spot</span></div>
</div>

.row{display:flex;gap:8%;align-items:center;justify-content:center;width:100%;height:100%}
.chip{display:flex;flex-direction:column;align-items:center;gap:8px}
.dots,.solid{width:min(120px,34vw);aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.dots{position:relative;isolation:isolate;background:#fff}
.pat{position:absolute;inset:0;background-image:
    radial-gradient(circle at 30% 30%,#ff2ec4 32%,transparent 34%),
    radial-gradient(circle at 70% 70%,#ffe600 32%,transparent 34%);
  background-size:10px 10px,10px 10px;background-position:0 0,5px 5px;
  mix-blend-mode:multiply;animation:jiggle 5s ease-in-out infinite}
@keyframes jiggle{0%,100%{background-size:10px 10px,10px 10px}50%{background-size:11px 11px,11px 11px}}
.solid{position:relative;background:#ff6a3d;overflow:hidden}
.solid::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 45%,transparent 60%);
  transform:translateX(-120%);animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{0%,20%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.cap{font:700 10px/1 ui-monospace,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}