<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146 44" role="img" aria-labelledby="title desc">
  <title id="title">Quick App</title>
  <desc id="desc">The Quick App signature shortens to Q3K.APP, followed by a staggered shimmer across the mark and wordmark.</desc>
  <defs>
    <linearGradient id="markShine"><stop stop-color="#fff" stop-opacity="0"/><stop offset=".5" stop-color="#fff" stop-opacity=".72"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient>
    <linearGradient id="textShine"><stop stop-color="#2f6bff" stop-opacity="0"/><stop offset=".5" stop-color="#2f6bff" stop-opacity=".95"/><stop offset="1" stop-color="#2f6bff" stop-opacity="0"/></linearGradient>
    <clipPath id="markClip"><rect x="4" y="4" width="36" height="36" rx="11"/></clipPath>
    <mask id="textMask"><g fill="#fff" font-family="Arial,sans-serif" font-size="11" font-weight="700"><text x="52" y="27">Q</text><text x="61" y="27" class="uic">UIC</text><text x="84" y="27" class="k">K</text><text x="94" y="27" class="app">APP</text><text x="61" y="27" class="three">3</text></g><circle cx="82.5" cy="24" r="1.5" fill="#fff" class="dot"/></mask>
  </defs>
  <style>
    .qloop,.qtail{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:draw .7s cubic-bezier(.2,.8,.2,1) forwards}.qloop{stroke-dasharray:54;stroke-dashoffset:54}.qtail{stroke-dasharray:6;stroke-dashoffset:6;animation-delay:.42s}.label{fill:#fff;stroke:#111827;stroke-width:1.35;paint-order:stroke fill;stroke-linejoin:round;font:700 11px Arial,sans-serif}.uic,.three,.k,.app,.dot{animation-duration:.7s;animation-delay:2.6s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.2,.8,.2,1);transform-box:fill-box;transform-origin:left center}.uic{animation-name:hide}.three{opacity:0;animation-name:show}.k{animation-name:kshift}.app{animation-name:appshift}.dot{opacity:0;animation-name:show}.markShine,.textShine{opacity:0;animation-duration:4.5s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.4,0,.2,1)}.markShine{animation-name:markShimmer;animation-delay:3.3s}.textShine{animation-name:textShimmer;animation-delay:3.48s}@keyframes draw{to{stroke-dashoffset:0}}@keyframes hide{to{opacity:0;transform:translateX(-2px)}}@keyframes show{to{opacity:1;transform:translateX(0)}}@keyframes kshift{to{transform:translateX(-14px)}}@keyframes appshift{to{transform:translateX(-8px)}}@keyframes markShimmer{0%{opacity:0;transform:translateX(0)}5%{opacity:1}18%{opacity:1;transform:translateX(62px)}19%,100%{opacity:0;transform:translateX(62px)}}@keyframes textShimmer{0%{opacity:0;transform:translateX(0)}5%{opacity:.82}18%{opacity:.82;transform:translateX(108px)}19%,100%{opacity:0;transform:translateX(108px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}.qloop,.qtail{stroke-dashoffset:0}.three,.dot,.markShine,.textShine{display:none}}
  </style>
  <rect x="4" y="4" width="36" height="36" rx="11" fill="#2f6bff"/>
  <circle cx="22" cy="21.5" r="8.5" class="qloop"/><path d="M27.8 27.7 32 31.9" class="qtail"/>
  <g class="label"><text x="52" y="27">Q</text><text x="61" y="27" class="uic">UIC</text><text x="84" y="27" class="k">K</text><text x="94" y="27" class="app">APP</text><text x="61" y="27" class="three">3</text><circle cx="82.5" cy="24" r="1.5" fill="#fff" class="dot"/></g>
  <g clip-path="url(#markClip)"><path d="M-18 42 2-4h12L-6 42Z" fill="url(#markShine)" class="markShine"/></g>
  <g mask="url(#textMask)"><path d="M39 36 51 8h5L44 36Z" fill="url(#textShine)" class="textShine"/></g>
</svg>
