SVG Icon animation

function openDemo(type) {
  if (typeof window.$ !== 'function') return;

  const iconAnimation = !!document.getElementById('optIcon')?.checked;
  const popupAnimation = !!document.getElementById('optPopup')?.checked;
  const closeOnEsc = !!document.getElementById('optEsc')?.checked;

  const title = String(type || '');
  const titleCap = title ? (title[0].toUpperCase() + title.slice(1)) : '';

  $.layer({
    title: titleCap,
    text: 'SVG draw + spring entrance',
    icon: title,
    iconAnimation,
    popupAnimation,
    closeOnEsc
  });
}

<div class="demo-visual">
  <div class="controls" style="margin-bottom: 14px;">
  <label><input id="optIcon" type="checkbox" checked> iconAnimation</label>
  <label><input id="optPopup" type="checkbox" checked> popupAnimation</label>
  <label><input id="optEsc" type="checkbox" checked> closeOnEsc</label>
  </div>
  <div class="row">
  <button class="btn success" type="button" onclick="openDemo('success')">Success</button>
  <button class="btn error" type="button" onclick="openDemo('error')">Error</button>
  <button class="btn warning" type="button" onclick="openDemo('warning')">Warning</button>
  <button class="btn info" type="button" onclick="openDemo('info')">Info</button>
  <button class="btn" type="button" onclick="openDemo('question')">Question</button>
  </div>
  <div class="hint">
    Tip: open “Error” to see the two stroke segments staggered.
  </div>
</div>

/* Keep Layer above the doc UI */
.layer-overlay { z-index: 99999; }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  font-size: 13px;
  color: #b7b7b7;
}
.controls label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.controls input { accent-color: var(--highlight-color); }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }
.btn.success { border-color: rgba(165,220,134,0.55); background: rgba(165,220,134,0.12); }
.btn.error { border-color: rgba(242,116,116,0.55); background: rgba(242,116,116,0.12); }
.btn.warning { border-color: rgba(248,187,134,0.55); background: rgba(248,187,134,0.12); }
.btn.info { border-color: rgba(63,195,238,0.55); background: rgba(63,195,238,0.12); }
.demo-visual { padding: 22px 24px; }
.hint { font-size: 12px; color: #8c8c8c; line-height: 1.5; margin-top: 10px; }