아바타

<div class="avw">
  <div class="av-single" id="avs"></div>
  <div class="av-group">
    <span class="av-item" style="background:#f25c8a">이</span>
    <span class="av-item" style="background:#5b5bf7">박</span>
    <span class="av-item" style="background:#18c29c">최</span>
    <span class="av-item more">+5</span>
  </div>
</div>

.avw{display:grid;gap:22px;justify-items:center}
.av-single{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px;overflow:hidden;position:relative}
.av-single[data-state=loading]{background:linear-gradient(100deg,var(--line) 30%,color-mix(in srgb, var(--line) 40%, var(--surface)) 50%,var(--line) 70%);background-size:200% 100%;animation:avshim 1.2s ease-in-out infinite}
.av-single[data-state=photo]{background:linear-gradient(135deg,#5b5bf7,#f25c8a)}
.av-single[data-state=initials]{background:#7c6df2}
@keyframes avshim{0%{background-position:120% 0}100%{background-position:-20% 0}}
.av-group{display:flex}
.av-item{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;border:2px solid var(--bg);margin-left:-9px}
.av-item:first-child{margin-left:0}
.more{background:var(--muted)}

const av = document.getElementById('avs');
const states = ['loading', 'photo', 'initials'];
let i = 0;
function paint() {
  av.dataset.state = states[i];
  av.textContent = states[i] === 'initials' ? '정경' : '';
}
paint();
setInterval(() => { i = (i + 1) % states.length; paint(); }, 1500);