SVG Store

Beautiful SVG motion your product can ship today

Pick from polished animations and curated motion bundles designed to make launches, dashboards, docs, and brand moments feel more premium in minutes.

Shop SVG Store Learn the techniques

Copy-ready motion Curated bundles Free and premium drops

Library

Find the right motion for the moment

Explore store drops by asset type, price, or style, then copy, download, or share the motion that fits your next release.

Type Price Category

Animations

40 assets

Free Brand Motion

Creator Achievement Star

A creator star draws in and receives a subtle victory orbit.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-f6992c630345-sva-creator-achievement-star" role="img" aria-labelledby="sva-f6992c630345-sva-creator-achievement-star-title sva-f6992c630345-sva-creator-achievement-star-desc"><title id="sva-f6992c630345-sva-creator-achievement-star-title">Creator Achievement Star</title><desc id="sva-f6992c630345-sva-creator-achievement-star-desc">A creator star draws in and receives a subtle victory orbit.</desc><defs><linearGradient id="sva-f6992c630345-sva-creator-achievement-star-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-f6992c630345-sva-creator-achievement-star{overflow:visible;background:#07111f}#sva-f6992c630345-sva-creator-achievement-star .spin{transform-box:fill-box;transform-origin:center;animation:sva-f6992c630345-sva-creator-achievement-star-spin 5s linear infinite}#sva-f6992c630345-sva-creator-achievement-star .reverse{transform-box:fill-box;transform-origin:center;animation:sva-f6992c630345-sva-creator-achievement-star-reverse 4s linear infinite}#sva-f6992c630345-sva-creator-achievement-star .pulse{transform-box:fill-box;transform-origin:center;animation:sva-f6992c630345-sva-creator-achievement-star-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .float{transform-box:fill-box;transform-origin:center;animation:sva-f6992c630345-sva-creator-achievement-star-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-f6992c630345-sva-creator-achievement-star-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .dash{animation:sva-f6992c630345-sva-creator-achievement-star-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .pop{transform-box:fill-box;transform-origin:center;animation:sva-f6992c630345-sva-creator-achievement-star-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-f6992c630345-sva-creator-achievement-star .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-f6992c630345-sva-creator-achievement-star-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .shake{transform-box:fill-box;transform-origin:center top;animation:sva-f6992c630345-sva-creator-achievement-star-shake 3s ease-in-out infinite}#sva-f6992c630345-sva-creator-achievement-star .slide{transform-box:fill-box;transform-origin:center;animation:sva-f6992c630345-sva-creator-achievement-star-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .sweep{animation:sva-f6992c630345-sva-creator-achievement-star-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .travel{animation:sva-f6992c630345-sva-creator-achievement-star-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-f6992c630345-sva-creator-achievement-star-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-f6992c630345-sva-creator-achievement-star .d2{animation-delay:-.7s}#sva-f6992c630345-sva-creator-achievement-star .d3{animation-delay:-1.35s}@keyframes sva-f6992c630345-sva-creator-achievement-star-spin{to{transform:rotate(360deg)}}@keyframes sva-f6992c630345-sva-creator-achievement-star-reverse{to{transform:rotate(-360deg)}}@keyframes sva-f6992c630345-sva-creator-achievement-star-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-f6992c630345-sva-creator-achievement-star-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-f6992c630345-sva-creator-achievement-star-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-f6992c630345-sva-creator-achievement-star-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-f6992c630345-sva-creator-achievement-star-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-f6992c630345-sva-creator-achievement-star-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-f6992c630345-sva-creator-achievement-star-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-f6992c630345-sva-creator-achievement-star-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-f6992c630345-sva-creator-achievement-star-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-f6992c630345-sva-creator-achievement-star-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-f6992c630345-sva-creator-achievement-star-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-f6992c630345-sva-creator-achievement-star *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><path class="draw" d="M80 25l14 29 32 5-23 23 6 33-29-16-29 16 6-33-23-23 32-5z" fill="#EC4899" fill-opacity=".18" stroke="url(#sva-f6992c630345-sva-creator-achievement-star-g)" stroke-width="5"/><g class="spin" fill="#8B5CF6"><circle cx="80" cy="19" r="4"/><circle cx="137" cy="80" r="4"/><circle cx="23" cy="80" r="4"/></g><circle class="pulse" cx="80" cy="80" r="10" fill="#FDF2F8"/></svg>

Free Brand Motion

Live Broadcast Signal

Concentric broadcast rings pulse from a live center.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-a54a9b3ba549-sva-live-broadcast-signal" role="img" aria-labelledby="sva-a54a9b3ba549-sva-live-broadcast-signal-title sva-a54a9b3ba549-sva-live-broadcast-signal-desc"><title id="sva-a54a9b3ba549-sva-live-broadcast-signal-title">Live Broadcast Signal</title><desc id="sva-a54a9b3ba549-sva-live-broadcast-signal-desc">Concentric broadcast rings pulse from a live center.</desc><defs><linearGradient id="sva-a54a9b3ba549-sva-live-broadcast-signal-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-a54a9b3ba549-sva-live-broadcast-signal{overflow:visible;background:#07111f}#sva-a54a9b3ba549-sva-live-broadcast-signal .spin{transform-box:fill-box;transform-origin:center;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-spin 5s linear infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .reverse{transform-box:fill-box;transform-origin:center;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-reverse 4s linear infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .pulse{transform-box:fill-box;transform-origin:center;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .float{transform-box:fill-box;transform-origin:center;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .dash{animation:sva-a54a9b3ba549-sva-live-broadcast-signal-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .pop{transform-box:fill-box;transform-origin:center;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .shake{transform-box:fill-box;transform-origin:center top;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-shake 3s ease-in-out infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .slide{transform-box:fill-box;transform-origin:center;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .sweep{animation:sva-a54a9b3ba549-sva-live-broadcast-signal-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .travel{animation:sva-a54a9b3ba549-sva-live-broadcast-signal-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-a54a9b3ba549-sva-live-broadcast-signal-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-a54a9b3ba549-sva-live-broadcast-signal .d2{animation-delay:-.7s}#sva-a54a9b3ba549-sva-live-broadcast-signal .d3{animation-delay:-1.35s}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-spin{to{transform:rotate(360deg)}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-reverse{to{transform:rotate(-360deg)}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-a54a9b3ba549-sva-live-broadcast-signal-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-a54a9b3ba549-sva-live-broadcast-signal *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><circle class="pulse" cx="80" cy="80" r="13" fill="#8B5CF6"/><circle class="pulse" cx="80" cy="80" r="31" fill="none" stroke="#EC4899" stroke-width="5"/><circle class="pulse d2" cx="80" cy="80" r="52" fill="none" stroke="#EC4899" stroke-opacity=".45" stroke-width="5"/><text x="80" y="143" fill="#FDF2F8" font-size="14" font-weight="700" text-anchor="middle" font-family="system-ui,sans-serif" letter-spacing="3">LIVE</text></svg>

Free Brand Motion

Follow Badge Pop

A profile follow state resolves with a positive badge pop.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-0beb5675be8a-sva-follow-badge-pop" role="img" aria-labelledby="sva-0beb5675be8a-sva-follow-badge-pop-title sva-0beb5675be8a-sva-follow-badge-pop-desc"><title id="sva-0beb5675be8a-sva-follow-badge-pop-title">Follow Badge Pop</title><desc id="sva-0beb5675be8a-sva-follow-badge-pop-desc">A profile follow state resolves with a positive badge pop.</desc><defs><linearGradient id="sva-0beb5675be8a-sva-follow-badge-pop-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-0beb5675be8a-sva-follow-badge-pop{overflow:visible;background:#07111f}#sva-0beb5675be8a-sva-follow-badge-pop .spin{transform-box:fill-box;transform-origin:center;animation:sva-0beb5675be8a-sva-follow-badge-pop-spin 5s linear infinite}#sva-0beb5675be8a-sva-follow-badge-pop .reverse{transform-box:fill-box;transform-origin:center;animation:sva-0beb5675be8a-sva-follow-badge-pop-reverse 4s linear infinite}#sva-0beb5675be8a-sva-follow-badge-pop .pulse{transform-box:fill-box;transform-origin:center;animation:sva-0beb5675be8a-sva-follow-badge-pop-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .float{transform-box:fill-box;transform-origin:center;animation:sva-0beb5675be8a-sva-follow-badge-pop-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-0beb5675be8a-sva-follow-badge-pop-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .dash{animation:sva-0beb5675be8a-sva-follow-badge-pop-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .pop{transform-box:fill-box;transform-origin:center;animation:sva-0beb5675be8a-sva-follow-badge-pop-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-0beb5675be8a-sva-follow-badge-pop-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .shake{transform-box:fill-box;transform-origin:center top;animation:sva-0beb5675be8a-sva-follow-badge-pop-shake 3s ease-in-out infinite}#sva-0beb5675be8a-sva-follow-badge-pop .slide{transform-box:fill-box;transform-origin:center;animation:sva-0beb5675be8a-sva-follow-badge-pop-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .sweep{animation:sva-0beb5675be8a-sva-follow-badge-pop-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .travel{animation:sva-0beb5675be8a-sva-follow-badge-pop-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-0beb5675be8a-sva-follow-badge-pop-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-0beb5675be8a-sva-follow-badge-pop .d2{animation-delay:-.7s}#sva-0beb5675be8a-sva-follow-badge-pop .d3{animation-delay:-1.35s}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-spin{to{transform:rotate(360deg)}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-reverse{to{transform:rotate(-360deg)}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-0beb5675be8a-sva-follow-badge-pop-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-0beb5675be8a-sva-follow-badge-pop *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><circle cx="68" cy="69" r="26" fill="#EC4899" fill-opacity=".18" stroke="#FDF2F8" stroke-width="3"/><circle cx="68" cy="62" r="10" fill="url(#sva-0beb5675be8a-sva-follow-badge-pop-g)"/><path d="M49 85c4-13 34-13 38 0" fill="#EC4899"/><g class="pop"><circle cx="108" cy="103" r="24" fill="#8B5CF6"/><path d="M108 90v26M95 103h26" stroke="#fff" stroke-width="5" stroke-linecap="round"/></g></svg>

Free Brand Motion

Heart Reaction Burst

A heart reaction blooms with controlled celebratory accents.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-7e1e8f4355d7-sva-heart-reaction-burst" role="img" aria-labelledby="sva-7e1e8f4355d7-sva-heart-reaction-burst-title sva-7e1e8f4355d7-sva-heart-reaction-burst-desc"><title id="sva-7e1e8f4355d7-sva-heart-reaction-burst-title">Heart Reaction Burst</title><desc id="sva-7e1e8f4355d7-sva-heart-reaction-burst-desc">A heart reaction blooms with controlled celebratory accents.</desc><defs><linearGradient id="sva-7e1e8f4355d7-sva-heart-reaction-burst-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-7e1e8f4355d7-sva-heart-reaction-burst{overflow:visible;background:#07111f}#sva-7e1e8f4355d7-sva-heart-reaction-burst .spin{transform-box:fill-box;transform-origin:center;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-spin 5s linear infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .reverse{transform-box:fill-box;transform-origin:center;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-reverse 4s linear infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .pulse{transform-box:fill-box;transform-origin:center;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .float{transform-box:fill-box;transform-origin:center;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .dash{animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .pop{transform-box:fill-box;transform-origin:center;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .shake{transform-box:fill-box;transform-origin:center top;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-shake 3s ease-in-out infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .slide{transform-box:fill-box;transform-origin:center;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .sweep{animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .travel{animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-7e1e8f4355d7-sva-heart-reaction-burst-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-7e1e8f4355d7-sva-heart-reaction-burst .d2{animation-delay:-.7s}#sva-7e1e8f4355d7-sva-heart-reaction-burst .d3{animation-delay:-1.35s}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-spin{to{transform:rotate(360deg)}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-reverse{to{transform:rotate(-360deg)}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-7e1e8f4355d7-sva-heart-reaction-burst-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-7e1e8f4355d7-sva-heart-reaction-burst *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><path class="pulse" d="M80 118S42 95 42 64c0-17 21-25 38-7 17-18 38-10 38 7 0 31-38 54-38 54z" fill="url(#sva-7e1e8f4355d7-sva-heart-reaction-burst-g)"/><g class="pop" fill="#8B5CF6"><circle cx="38" cy="38" r="5"/><circle cx="122" cy="38" r="5"/><path d="M127 90l4 8 8 4-8 4-4 8-4-8-8-4 8-4z"/></g></svg>

Free Brand Motion

Connected Share Orbit

Three share nodes connect and pulse in sequence.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-8337e170e55c-sva-connected-share-orbit" role="img" aria-labelledby="sva-8337e170e55c-sva-connected-share-orbit-title sva-8337e170e55c-sva-connected-share-orbit-desc"><title id="sva-8337e170e55c-sva-connected-share-orbit-title">Connected Share Orbit</title><desc id="sva-8337e170e55c-sva-connected-share-orbit-desc">Three share nodes connect and pulse in sequence.</desc><defs><linearGradient id="sva-8337e170e55c-sva-connected-share-orbit-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-8337e170e55c-sva-connected-share-orbit{overflow:visible;background:#07111f}#sva-8337e170e55c-sva-connected-share-orbit .spin{transform-box:fill-box;transform-origin:center;animation:sva-8337e170e55c-sva-connected-share-orbit-spin 5s linear infinite}#sva-8337e170e55c-sva-connected-share-orbit .reverse{transform-box:fill-box;transform-origin:center;animation:sva-8337e170e55c-sva-connected-share-orbit-reverse 4s linear infinite}#sva-8337e170e55c-sva-connected-share-orbit .pulse{transform-box:fill-box;transform-origin:center;animation:sva-8337e170e55c-sva-connected-share-orbit-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .float{transform-box:fill-box;transform-origin:center;animation:sva-8337e170e55c-sva-connected-share-orbit-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-8337e170e55c-sva-connected-share-orbit-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .dash{animation:sva-8337e170e55c-sva-connected-share-orbit-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .pop{transform-box:fill-box;transform-origin:center;animation:sva-8337e170e55c-sva-connected-share-orbit-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-8337e170e55c-sva-connected-share-orbit .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-8337e170e55c-sva-connected-share-orbit-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .shake{transform-box:fill-box;transform-origin:center top;animation:sva-8337e170e55c-sva-connected-share-orbit-shake 3s ease-in-out infinite}#sva-8337e170e55c-sva-connected-share-orbit .slide{transform-box:fill-box;transform-origin:center;animation:sva-8337e170e55c-sva-connected-share-orbit-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .sweep{animation:sva-8337e170e55c-sva-connected-share-orbit-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .travel{animation:sva-8337e170e55c-sva-connected-share-orbit-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-8337e170e55c-sva-connected-share-orbit-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-8337e170e55c-sva-connected-share-orbit .d2{animation-delay:-.7s}#sva-8337e170e55c-sva-connected-share-orbit .d3{animation-delay:-1.35s}@keyframes sva-8337e170e55c-sva-connected-share-orbit-spin{to{transform:rotate(360deg)}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-reverse{to{transform:rotate(-360deg)}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-8337e170e55c-sva-connected-share-orbit-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-8337e170e55c-sva-connected-share-orbit *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><path class="draw" d="M53 80l50-30M53 80l50 30" stroke="#EC4899" stroke-width="5"/><g fill="url(#sva-8337e170e55c-sva-connected-share-orbit-g)" stroke="#FDF2F8" stroke-width="3"><circle class="pulse" cx="45" cy="80" r="14"/><circle class="pulse d2" cx="113" cy="42" r="14"/><circle class="pulse d3" cx="113" cy="118" r="14"/></g></svg>

Free Brand Motion

Message Typing Glow

A refined message bubble with staggered typing lights.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-f94cdac62259-sva-message-typing-glow" role="img" aria-labelledby="sva-f94cdac62259-sva-message-typing-glow-title sva-f94cdac62259-sva-message-typing-glow-desc"><title id="sva-f94cdac62259-sva-message-typing-glow-title">Message Typing Glow</title><desc id="sva-f94cdac62259-sva-message-typing-glow-desc">A refined message bubble with staggered typing lights.</desc><defs><linearGradient id="sva-f94cdac62259-sva-message-typing-glow-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-f94cdac62259-sva-message-typing-glow{overflow:visible;background:#07111f}#sva-f94cdac62259-sva-message-typing-glow .spin{transform-box:fill-box;transform-origin:center;animation:sva-f94cdac62259-sva-message-typing-glow-spin 5s linear infinite}#sva-f94cdac62259-sva-message-typing-glow .reverse{transform-box:fill-box;transform-origin:center;animation:sva-f94cdac62259-sva-message-typing-glow-reverse 4s linear infinite}#sva-f94cdac62259-sva-message-typing-glow .pulse{transform-box:fill-box;transform-origin:center;animation:sva-f94cdac62259-sva-message-typing-glow-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .float{transform-box:fill-box;transform-origin:center;animation:sva-f94cdac62259-sva-message-typing-glow-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-f94cdac62259-sva-message-typing-glow-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .dash{animation:sva-f94cdac62259-sva-message-typing-glow-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .pop{transform-box:fill-box;transform-origin:center;animation:sva-f94cdac62259-sva-message-typing-glow-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-f94cdac62259-sva-message-typing-glow .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-f94cdac62259-sva-message-typing-glow-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .shake{transform-box:fill-box;transform-origin:center top;animation:sva-f94cdac62259-sva-message-typing-glow-shake 3s ease-in-out infinite}#sva-f94cdac62259-sva-message-typing-glow .slide{transform-box:fill-box;transform-origin:center;animation:sva-f94cdac62259-sva-message-typing-glow-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .sweep{animation:sva-f94cdac62259-sva-message-typing-glow-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .travel{animation:sva-f94cdac62259-sva-message-typing-glow-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-f94cdac62259-sva-message-typing-glow-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-f94cdac62259-sva-message-typing-glow .d2{animation-delay:-.7s}#sva-f94cdac62259-sva-message-typing-glow .d3{animation-delay:-1.35s}@keyframes sva-f94cdac62259-sva-message-typing-glow-spin{to{transform:rotate(360deg)}}@keyframes sva-f94cdac62259-sva-message-typing-glow-reverse{to{transform:rotate(-360deg)}}@keyframes sva-f94cdac62259-sva-message-typing-glow-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-f94cdac62259-sva-message-typing-glow-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-f94cdac62259-sva-message-typing-glow-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-f94cdac62259-sva-message-typing-glow-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-f94cdac62259-sva-message-typing-glow-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-f94cdac62259-sva-message-typing-glow-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-f94cdac62259-sva-message-typing-glow-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-f94cdac62259-sva-message-typing-glow-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-f94cdac62259-sva-message-typing-glow-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-f94cdac62259-sva-message-typing-glow-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-f94cdac62259-sva-message-typing-glow-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-f94cdac62259-sva-message-typing-glow *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><path d="M28 42h104v72H75l-22 18 3-18H28z" fill="#EC4899" fill-opacity=".16" stroke="#FDF2F8" stroke-width="3" stroke-linejoin="round"/><g fill="url(#sva-f94cdac62259-sva-message-typing-glow-g)"><circle class="pulse" cx="59" cy="78" r="8"/><circle class="pulse d2" cx="80" cy="78" r="8"/><circle class="pulse d3" cx="101" cy="78" r="8"/></g></svg>

Free Brand Motion

Avatar Presence Orbit

An avatar gains an orbiting presence indicator and halo.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-fee9f6b84829-sva-avatar-presence-orbit" role="img" aria-labelledby="sva-fee9f6b84829-sva-avatar-presence-orbit-title sva-fee9f6b84829-sva-avatar-presence-orbit-desc"><title id="sva-fee9f6b84829-sva-avatar-presence-orbit-title">Avatar Presence Orbit</title><desc id="sva-fee9f6b84829-sva-avatar-presence-orbit-desc">An avatar gains an orbiting presence indicator and halo.</desc><defs><linearGradient id="sva-fee9f6b84829-sva-avatar-presence-orbit-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-fee9f6b84829-sva-avatar-presence-orbit{overflow:visible;background:#07111f}#sva-fee9f6b84829-sva-avatar-presence-orbit .spin{transform-box:fill-box;transform-origin:center;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-spin 5s linear infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .reverse{transform-box:fill-box;transform-origin:center;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-reverse 4s linear infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .pulse{transform-box:fill-box;transform-origin:center;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .float{transform-box:fill-box;transform-origin:center;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .dash{animation:sva-fee9f6b84829-sva-avatar-presence-orbit-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .pop{transform-box:fill-box;transform-origin:center;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .shake{transform-box:fill-box;transform-origin:center top;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-shake 3s ease-in-out infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .slide{transform-box:fill-box;transform-origin:center;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .sweep{animation:sva-fee9f6b84829-sva-avatar-presence-orbit-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .travel{animation:sva-fee9f6b84829-sva-avatar-presence-orbit-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-fee9f6b84829-sva-avatar-presence-orbit-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-fee9f6b84829-sva-avatar-presence-orbit .d2{animation-delay:-.7s}#sva-fee9f6b84829-sva-avatar-presence-orbit .d3{animation-delay:-1.35s}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-spin{to{transform:rotate(360deg)}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-reverse{to{transform:rotate(-360deg)}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-fee9f6b84829-sva-avatar-presence-orbit-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-fee9f6b84829-sva-avatar-presence-orbit *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><circle cx="80" cy="78" r="38" fill="#EC4899" fill-opacity=".17" stroke="#FDF2F8" stroke-width="3"/><circle cx="80" cy="68" r="14" fill="url(#sva-fee9f6b84829-sva-avatar-presence-orbit-g)"/><path d="M55 101c6-18 44-18 50 0" fill="#EC4899"/><g class="spin"><circle cx="80" cy="25" r="7" fill="#8B5CF6"/><circle cx="130" cy="80" r="5" fill="#FDF2F8"/><circle cx="30" cy="80" r="5" fill="#EC4899"/></g></svg>

Free Brand Motion

Signal Logo Facet Reveal

A faceted brand mark draws and settles with premium restraint.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-87475273d4ba-sva-signal-logo-facet-reveal" role="img" aria-labelledby="sva-87475273d4ba-sva-signal-logo-facet-reveal-title sva-87475273d4ba-sva-signal-logo-facet-reveal-desc"><title id="sva-87475273d4ba-sva-signal-logo-facet-reveal-title">Signal Logo Facet Reveal</title><desc id="sva-87475273d4ba-sva-signal-logo-facet-reveal-desc">A faceted brand mark draws and settles with premium restraint.</desc><defs><linearGradient id="sva-87475273d4ba-sva-signal-logo-facet-reveal-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#EC4899"/><stop offset="1" stop-color="#8B5CF6"/></linearGradient></defs><style>#sva-87475273d4ba-sva-signal-logo-facet-reveal{overflow:visible;background:#07111f}#sva-87475273d4ba-sva-signal-logo-facet-reveal .spin{transform-box:fill-box;transform-origin:center;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-spin 5s linear infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .reverse{transform-box:fill-box;transform-origin:center;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-reverse 4s linear infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .pulse{transform-box:fill-box;transform-origin:center;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .float{transform-box:fill-box;transform-origin:center;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .dash{animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .pop{transform-box:fill-box;transform-origin:center;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .shake{transform-box:fill-box;transform-origin:center top;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-shake 3s ease-in-out infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .slide{transform-box:fill-box;transform-origin:center;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .sweep{animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .travel{animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-87475273d4ba-sva-signal-logo-facet-reveal-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-87475273d4ba-sva-signal-logo-facet-reveal .d2{animation-delay:-.7s}#sva-87475273d4ba-sva-signal-logo-facet-reveal .d3{animation-delay:-1.35s}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-spin{to{transform:rotate(360deg)}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-reverse{to{transform:rotate(-360deg)}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-87475273d4ba-sva-signal-logo-facet-reveal-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-87475273d4ba-sva-signal-logo-facet-reveal *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#EC4899" stroke-opacity=".2" stroke-width="2"/><g class="spin" fill="none" stroke="url(#sva-87475273d4ba-sva-signal-logo-facet-reveal-g)" stroke-width="5" stroke-linejoin="round"><path class="draw" d="M80 25l47 55-47 55-47-55z"/><path class="draw d2" d="M80 48l28 32-28 32-28-32z"/></g><circle class="pulse" cx="80" cy="80" r="9" fill="#FDF2F8"/></svg>

Free Data Visualization

Growth Trend Lift

A confident trend arrow rises across an animated grid.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-3af93197a977-sva-growth-trend-lift" role="img" aria-labelledby="sva-3af93197a977-sva-growth-trend-lift-title sva-3af93197a977-sva-growth-trend-lift-desc"><title id="sva-3af93197a977-sva-growth-trend-lift-title">Growth Trend Lift</title><desc id="sva-3af93197a977-sva-growth-trend-lift-desc">A confident trend arrow rises across an animated grid.</desc><defs><linearGradient id="sva-3af93197a977-sva-growth-trend-lift-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-3af93197a977-sva-growth-trend-lift{overflow:visible;background:#07111f}#sva-3af93197a977-sva-growth-trend-lift .spin{transform-box:fill-box;transform-origin:center;animation:sva-3af93197a977-sva-growth-trend-lift-spin 5s linear infinite}#sva-3af93197a977-sva-growth-trend-lift .reverse{transform-box:fill-box;transform-origin:center;animation:sva-3af93197a977-sva-growth-trend-lift-reverse 4s linear infinite}#sva-3af93197a977-sva-growth-trend-lift .pulse{transform-box:fill-box;transform-origin:center;animation:sva-3af93197a977-sva-growth-trend-lift-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .float{transform-box:fill-box;transform-origin:center;animation:sva-3af93197a977-sva-growth-trend-lift-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-3af93197a977-sva-growth-trend-lift-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .dash{animation:sva-3af93197a977-sva-growth-trend-lift-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .pop{transform-box:fill-box;transform-origin:center;animation:sva-3af93197a977-sva-growth-trend-lift-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-3af93197a977-sva-growth-trend-lift .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-3af93197a977-sva-growth-trend-lift-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .shake{transform-box:fill-box;transform-origin:center top;animation:sva-3af93197a977-sva-growth-trend-lift-shake 3s ease-in-out infinite}#sva-3af93197a977-sva-growth-trend-lift .slide{transform-box:fill-box;transform-origin:center;animation:sva-3af93197a977-sva-growth-trend-lift-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .sweep{animation:sva-3af93197a977-sva-growth-trend-lift-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .travel{animation:sva-3af93197a977-sva-growth-trend-lift-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-3af93197a977-sva-growth-trend-lift-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .d2{animation-delay:-.7s}#sva-3af93197a977-sva-growth-trend-lift .d3{animation-delay:-1.35s}@keyframes sva-3af93197a977-sva-growth-trend-lift-spin{to{transform:rotate(360deg)}}@keyframes sva-3af93197a977-sva-growth-trend-lift-reverse{to{transform:rotate(-360deg)}}@keyframes sva-3af93197a977-sva-growth-trend-lift-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-3af93197a977-sva-growth-trend-lift-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-3af93197a977-sva-growth-trend-lift-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-3af93197a977-sva-growth-trend-lift-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-3af93197a977-sva-growth-trend-lift-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-3af93197a977-sva-growth-trend-lift-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-3af93197a977-sva-growth-trend-lift-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-3af93197a977-sva-growth-trend-lift-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-3af93197a977-sva-growth-trend-lift-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-3af93197a977-sva-growth-trend-lift-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-3af93197a977-sva-growth-trend-lift-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-3af93197a977-sva-growth-trend-lift *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><path d="M30 124h102M30 94h102M30 64h102M30 34h102" stroke="#10B981" stroke-opacity=".14" stroke-width="2"/><path class="draw" d="M34 111l27-25 22 9 39-48" fill="none" stroke="url(#sva-3af93197a977-sva-growth-trend-lift-g)" stroke-width="7"/><path class="pop" d="M105 45h21v21" fill="none" stroke="#38BDF8" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/></svg>

Free Data Visualization

Heatmap Insight Pulse

A compact heatmap highlights shifting areas of interest.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-90ea29971c76-sva-heatmap-insight-pulse" role="img" aria-labelledby="sva-90ea29971c76-sva-heatmap-insight-pulse-title sva-90ea29971c76-sva-heatmap-insight-pulse-desc"><title id="sva-90ea29971c76-sva-heatmap-insight-pulse-title">Heatmap Insight Pulse</title><desc id="sva-90ea29971c76-sva-heatmap-insight-pulse-desc">A compact heatmap highlights shifting areas of interest.</desc><defs><linearGradient id="sva-90ea29971c76-sva-heatmap-insight-pulse-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-90ea29971c76-sva-heatmap-insight-pulse{overflow:visible;background:#07111f}#sva-90ea29971c76-sva-heatmap-insight-pulse .spin{transform-box:fill-box;transform-origin:center;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-spin 5s linear infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .reverse{transform-box:fill-box;transform-origin:center;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-reverse 4s linear infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .pulse{transform-box:fill-box;transform-origin:center;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .float{transform-box:fill-box;transform-origin:center;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .dash{animation:sva-90ea29971c76-sva-heatmap-insight-pulse-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .pop{transform-box:fill-box;transform-origin:center;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .shake{transform-box:fill-box;transform-origin:center top;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-shake 3s ease-in-out infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .slide{transform-box:fill-box;transform-origin:center;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .sweep{animation:sva-90ea29971c76-sva-heatmap-insight-pulse-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .travel{animation:sva-90ea29971c76-sva-heatmap-insight-pulse-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .d2{animation-delay:-.7s}#sva-90ea29971c76-sva-heatmap-insight-pulse .d3{animation-delay:-1.35s}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-spin{to{transform:rotate(360deg)}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-reverse{to{transform:rotate(-360deg)}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-90ea29971c76-sva-heatmap-insight-pulse *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><g><rect class="pulse" x="39" y="39" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.28"/><rect class="pulse d2" x="61" y="39" width="16" height="16" rx="5" fill="#10B981" opacity="0.42"/><rect class="pulse d3" x="83" y="39" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.56"/><rect class="pulse" x="105" y="39" width="16" height="16" rx="5" fill="#10B981" opacity="0.70"/><rect class="pulse d2" x="39" y="61" width="16" height="16" rx="5" fill="#10B981" opacity="0.84"/><rect class="pulse d3" x="61" y="61" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.28"/><rect class="pulse" x="83" y="61" width="16" height="16" rx="5" fill="#10B981" opacity="0.42"/><rect class="pulse d2" x="105" y="61" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.56"/><rect class="pulse d3" x="39" y="83" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.70"/><rect class="pulse" x="61" y="83" width="16" height="16" rx="5" fill="#10B981" opacity="0.84"/><rect class="pulse d2" x="83" y="83" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.28"/><rect class="pulse d3" x="105" y="83" width="16" height="16" rx="5" fill="#10B981" opacity="0.42"/><rect class="pulse" x="39" y="105" width="16" height="16" rx="5" fill="#10B981" opacity="0.56"/><rect class="pulse d2" x="61" y="105" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.70"/><rect class="pulse d3" x="83" y="105" width="16" height="16" rx="5" fill="#10B981" opacity="0.84"/><rect class="pulse" x="105" y="105" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.28"/></g></svg>

Free Data Visualization

Funnel Flow Stages

Conversion stages reveal from wide acquisition to result.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-754df82c93a8-sva-funnel-flow-stages" role="img" aria-labelledby="sva-754df82c93a8-sva-funnel-flow-stages-title sva-754df82c93a8-sva-funnel-flow-stages-desc"><title id="sva-754df82c93a8-sva-funnel-flow-stages-title">Funnel Flow Stages</title><desc id="sva-754df82c93a8-sva-funnel-flow-stages-desc">Conversion stages reveal from wide acquisition to result.</desc><defs><linearGradient id="sva-754df82c93a8-sva-funnel-flow-stages-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-754df82c93a8-sva-funnel-flow-stages{overflow:visible;background:#07111f}#sva-754df82c93a8-sva-funnel-flow-stages .spin{transform-box:fill-box;transform-origin:center;animation:sva-754df82c93a8-sva-funnel-flow-stages-spin 5s linear infinite}#sva-754df82c93a8-sva-funnel-flow-stages .reverse{transform-box:fill-box;transform-origin:center;animation:sva-754df82c93a8-sva-funnel-flow-stages-reverse 4s linear infinite}#sva-754df82c93a8-sva-funnel-flow-stages .pulse{transform-box:fill-box;transform-origin:center;animation:sva-754df82c93a8-sva-funnel-flow-stages-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .float{transform-box:fill-box;transform-origin:center;animation:sva-754df82c93a8-sva-funnel-flow-stages-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-754df82c93a8-sva-funnel-flow-stages-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .dash{animation:sva-754df82c93a8-sva-funnel-flow-stages-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .pop{transform-box:fill-box;transform-origin:center;animation:sva-754df82c93a8-sva-funnel-flow-stages-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-754df82c93a8-sva-funnel-flow-stages-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .shake{transform-box:fill-box;transform-origin:center top;animation:sva-754df82c93a8-sva-funnel-flow-stages-shake 3s ease-in-out infinite}#sva-754df82c93a8-sva-funnel-flow-stages .slide{transform-box:fill-box;transform-origin:center;animation:sva-754df82c93a8-sva-funnel-flow-stages-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .sweep{animation:sva-754df82c93a8-sva-funnel-flow-stages-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .travel{animation:sva-754df82c93a8-sva-funnel-flow-stages-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-754df82c93a8-sva-funnel-flow-stages-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .d2{animation-delay:-.7s}#sva-754df82c93a8-sva-funnel-flow-stages .d3{animation-delay:-1.35s}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-spin{to{transform:rotate(360deg)}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-reverse{to{transform:rotate(-360deg)}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-754df82c93a8-sva-funnel-flow-stages *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><g fill="url(#sva-754df82c93a8-sva-funnel-flow-stages-g)"><path class="pop" d="M29 35h102l-13 22H42z"/><path class="pop d2" d="M45 65h70l-13 22H58z" opacity=".82"/><path class="pop d3" d="M61 95h38l-11 25H72z" opacity=".68"/></g><circle class="pulse" cx="80" cy="132" r="7" fill="#38BDF8"/></svg>

Free Data Visualization

Performance Gauge Settle

A gauge arc resolves as the needle settles into range.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-7a96104c6404-sva-performance-gauge-settle" role="img" aria-labelledby="sva-7a96104c6404-sva-performance-gauge-settle-title sva-7a96104c6404-sva-performance-gauge-settle-desc"><title id="sva-7a96104c6404-sva-performance-gauge-settle-title">Performance Gauge Settle</title><desc id="sva-7a96104c6404-sva-performance-gauge-settle-desc">A gauge arc resolves as the needle settles into range.</desc><defs><linearGradient id="sva-7a96104c6404-sva-performance-gauge-settle-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-7a96104c6404-sva-performance-gauge-settle{overflow:visible;background:#07111f}#sva-7a96104c6404-sva-performance-gauge-settle .spin{transform-box:fill-box;transform-origin:center;animation:sva-7a96104c6404-sva-performance-gauge-settle-spin 5s linear infinite}#sva-7a96104c6404-sva-performance-gauge-settle .reverse{transform-box:fill-box;transform-origin:center;animation:sva-7a96104c6404-sva-performance-gauge-settle-reverse 4s linear infinite}#sva-7a96104c6404-sva-performance-gauge-settle .pulse{transform-box:fill-box;transform-origin:center;animation:sva-7a96104c6404-sva-performance-gauge-settle-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .float{transform-box:fill-box;transform-origin:center;animation:sva-7a96104c6404-sva-performance-gauge-settle-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-7a96104c6404-sva-performance-gauge-settle-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .dash{animation:sva-7a96104c6404-sva-performance-gauge-settle-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .pop{transform-box:fill-box;transform-origin:center;animation:sva-7a96104c6404-sva-performance-gauge-settle-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-7a96104c6404-sva-performance-gauge-settle-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .shake{transform-box:fill-box;transform-origin:center top;animation:sva-7a96104c6404-sva-performance-gauge-settle-shake 3s ease-in-out infinite}#sva-7a96104c6404-sva-performance-gauge-settle .slide{transform-box:fill-box;transform-origin:center;animation:sva-7a96104c6404-sva-performance-gauge-settle-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .sweep{animation:sva-7a96104c6404-sva-performance-gauge-settle-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .travel{animation:sva-7a96104c6404-sva-performance-gauge-settle-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-7a96104c6404-sva-performance-gauge-settle-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .d2{animation-delay:-.7s}#sva-7a96104c6404-sva-performance-gauge-settle .d3{animation-delay:-1.35s}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-spin{to{transform:rotate(360deg)}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-reverse{to{transform:rotate(-360deg)}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-7a96104c6404-sva-performance-gauge-settle *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><path d="M30 105a54 54 0 01100 0" fill="none" stroke="#10B981" stroke-opacity=".18" stroke-width="14" stroke-linecap="round"/><path class="dash" d="M30 105a54 54 0 0178-47" fill="none" stroke="url(#sva-7a96104c6404-sva-performance-gauge-settle-g)" stroke-width="14" stroke-linecap="round"/><g class="tilt"><path d="M80 101l35-28" stroke="#ECFDF5" stroke-width="5" stroke-linecap="round"/><circle cx="80" cy="101" r="10" fill="#38BDF8"/></g></svg>

Free Data Visualization

Sparkline Trace Up

An upward sparkline draws across a quiet analytical grid.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-4099df1e0bfa-sva-sparkline-trace-up" role="img" aria-labelledby="sva-4099df1e0bfa-sva-sparkline-trace-up-title sva-4099df1e0bfa-sva-sparkline-trace-up-desc"><title id="sva-4099df1e0bfa-sva-sparkline-trace-up-title">Sparkline Trace Up</title><desc id="sva-4099df1e0bfa-sva-sparkline-trace-up-desc">An upward sparkline draws across a quiet analytical grid.</desc><defs><linearGradient id="sva-4099df1e0bfa-sva-sparkline-trace-up-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-4099df1e0bfa-sva-sparkline-trace-up{overflow:visible;background:#07111f}#sva-4099df1e0bfa-sva-sparkline-trace-up .spin{transform-box:fill-box;transform-origin:center;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-spin 5s linear infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .reverse{transform-box:fill-box;transform-origin:center;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-reverse 4s linear infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .pulse{transform-box:fill-box;transform-origin:center;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .float{transform-box:fill-box;transform-origin:center;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .dash{animation:sva-4099df1e0bfa-sva-sparkline-trace-up-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .pop{transform-box:fill-box;transform-origin:center;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .shake{transform-box:fill-box;transform-origin:center top;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-shake 3s ease-in-out infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .slide{transform-box:fill-box;transform-origin:center;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .sweep{animation:sva-4099df1e0bfa-sva-sparkline-trace-up-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .travel{animation:sva-4099df1e0bfa-sva-sparkline-trace-up-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .d2{animation-delay:-.7s}#sva-4099df1e0bfa-sva-sparkline-trace-up .d3{animation-delay:-1.35s}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-spin{to{transform:rotate(360deg)}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-reverse{to{transform:rotate(-360deg)}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-4099df1e0bfa-sva-sparkline-trace-up *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><path d="M25 119h110M25 89h110M25 59h110" stroke="#10B981" stroke-opacity=".16" stroke-width="2"/><path class="draw" d="M28 109l19-18 18 7 21-35 20 11 26-39" fill="none" stroke="url(#sva-4099df1e0bfa-sva-sparkline-trace-up-g)" stroke-width="7"/><circle class="pulse" cx="132" cy="35" r="7" fill="#38BDF8"/></svg>

Free Data Visualization

Segment Donut Sweep

Layered donut segments animate into a balanced composition.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-2e510a0ff632-sva-segment-donut-sweep" role="img" aria-labelledby="sva-2e510a0ff632-sva-segment-donut-sweep-title sva-2e510a0ff632-sva-segment-donut-sweep-desc"><title id="sva-2e510a0ff632-sva-segment-donut-sweep-title">Segment Donut Sweep</title><desc id="sva-2e510a0ff632-sva-segment-donut-sweep-desc">Layered donut segments animate into a balanced composition.</desc><defs><linearGradient id="sva-2e510a0ff632-sva-segment-donut-sweep-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-2e510a0ff632-sva-segment-donut-sweep{overflow:visible;background:#07111f}#sva-2e510a0ff632-sva-segment-donut-sweep .spin{transform-box:fill-box;transform-origin:center;animation:sva-2e510a0ff632-sva-segment-donut-sweep-spin 5s linear infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .reverse{transform-box:fill-box;transform-origin:center;animation:sva-2e510a0ff632-sva-segment-donut-sweep-reverse 4s linear infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .pulse{transform-box:fill-box;transform-origin:center;animation:sva-2e510a0ff632-sva-segment-donut-sweep-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .float{transform-box:fill-box;transform-origin:center;animation:sva-2e510a0ff632-sva-segment-donut-sweep-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-2e510a0ff632-sva-segment-donut-sweep-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .dash{animation:sva-2e510a0ff632-sva-segment-donut-sweep-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .pop{transform-box:fill-box;transform-origin:center;animation:sva-2e510a0ff632-sva-segment-donut-sweep-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-2e510a0ff632-sva-segment-donut-sweep-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .shake{transform-box:fill-box;transform-origin:center top;animation:sva-2e510a0ff632-sva-segment-donut-sweep-shake 3s ease-in-out infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .slide{transform-box:fill-box;transform-origin:center;animation:sva-2e510a0ff632-sva-segment-donut-sweep-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .sweep{animation:sva-2e510a0ff632-sva-segment-donut-sweep-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .travel{animation:sva-2e510a0ff632-sva-segment-donut-sweep-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-2e510a0ff632-sva-segment-donut-sweep-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .d2{animation-delay:-.7s}#sva-2e510a0ff632-sva-segment-donut-sweep .d3{animation-delay:-1.35s}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-spin{to{transform:rotate(360deg)}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-reverse{to{transform:rotate(-360deg)}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-2e510a0ff632-sva-segment-donut-sweep *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><circle cx="80" cy="80" r="46" fill="none" stroke="#10B981" stroke-opacity=".14" stroke-width="17"/><circle class="dash" cx="80" cy="80" r="46" fill="none" stroke="#10B981" stroke-width="17" stroke-dasharray="132 289" transform="rotate(-90 80 80)"/><circle class="dash d2" cx="80" cy="80" r="46" fill="none" stroke="#38BDF8" stroke-width="17" stroke-dasharray="74 289" stroke-dashoffset="-144" transform="rotate(-90 80 80)"/><circle cx="80" cy="80" r="18" fill="#ECFDF5" fill-opacity=".1"/></svg>

Free Data Visualization

Revenue Bar Rise

Four premium bars rise with staggered grid alignment.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-7ecac519a1d6-sva-revenue-bar-rise" role="img" aria-labelledby="sva-7ecac519a1d6-sva-revenue-bar-rise-title sva-7ecac519a1d6-sva-revenue-bar-rise-desc"><title id="sva-7ecac519a1d6-sva-revenue-bar-rise-title">Revenue Bar Rise</title><desc id="sva-7ecac519a1d6-sva-revenue-bar-rise-desc">Four premium bars rise with staggered grid alignment.</desc><defs><linearGradient id="sva-7ecac519a1d6-sva-revenue-bar-rise-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-7ecac519a1d6-sva-revenue-bar-rise{overflow:visible;background:#07111f}#sva-7ecac519a1d6-sva-revenue-bar-rise .spin{transform-box:fill-box;transform-origin:center;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-spin 5s linear infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .reverse{transform-box:fill-box;transform-origin:center;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-reverse 4s linear infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .pulse{transform-box:fill-box;transform-origin:center;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .float{transform-box:fill-box;transform-origin:center;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .dash{animation:sva-7ecac519a1d6-sva-revenue-bar-rise-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .pop{transform-box:fill-box;transform-origin:center;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .shake{transform-box:fill-box;transform-origin:center top;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-shake 3s ease-in-out infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .slide{transform-box:fill-box;transform-origin:center;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .sweep{animation:sva-7ecac519a1d6-sva-revenue-bar-rise-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .travel{animation:sva-7ecac519a1d6-sva-revenue-bar-rise-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .d2{animation-delay:-.7s}#sva-7ecac519a1d6-sva-revenue-bar-rise .d3{animation-delay:-1.35s}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-spin{to{transform:rotate(360deg)}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-reverse{to{transform:rotate(-360deg)}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-7ecac519a1d6-sva-revenue-bar-rise *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><path d="M28 124h108M28 95h108M28 66h108M28 37h108" stroke="#10B981" stroke-opacity=".15" stroke-width="2"/><g fill="url(#sva-7ecac519a1d6-sva-revenue-bar-rise-g)"><rect class="rise" x="38" y="83" width="18" height="41" rx="6"/><rect class="rise d2" x="65" y="61" width="18" height="63" rx="6"/><rect class="rise d3" x="92" y="42" width="18" height="82" rx="6"/><rect class="rise" x="119" y="71" width="10" height="53" rx="5"/></g></svg>

Free Data Visualization

KPI Confidence Ring

A metric ring resolves around a crisp seventy-two percent KPI.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-a74b93497797-sva-kpi-confidence-ring" role="img" aria-labelledby="sva-a74b93497797-sva-kpi-confidence-ring-title sva-a74b93497797-sva-kpi-confidence-ring-desc"><title id="sva-a74b93497797-sva-kpi-confidence-ring-title">KPI Confidence Ring</title><desc id="sva-a74b93497797-sva-kpi-confidence-ring-desc">A metric ring resolves around a crisp seventy-two percent KPI.</desc><defs><linearGradient id="sva-a74b93497797-sva-kpi-confidence-ring-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-a74b93497797-sva-kpi-confidence-ring{overflow:visible;background:#07111f}#sva-a74b93497797-sva-kpi-confidence-ring .spin{transform-box:fill-box;transform-origin:center;animation:sva-a74b93497797-sva-kpi-confidence-ring-spin 5s linear infinite}#sva-a74b93497797-sva-kpi-confidence-ring .reverse{transform-box:fill-box;transform-origin:center;animation:sva-a74b93497797-sva-kpi-confidence-ring-reverse 4s linear infinite}#sva-a74b93497797-sva-kpi-confidence-ring .pulse{transform-box:fill-box;transform-origin:center;animation:sva-a74b93497797-sva-kpi-confidence-ring-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .float{transform-box:fill-box;transform-origin:center;animation:sva-a74b93497797-sva-kpi-confidence-ring-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-a74b93497797-sva-kpi-confidence-ring-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .dash{animation:sva-a74b93497797-sva-kpi-confidence-ring-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .pop{transform-box:fill-box;transform-origin:center;animation:sva-a74b93497797-sva-kpi-confidence-ring-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-a74b93497797-sva-kpi-confidence-ring-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .shake{transform-box:fill-box;transform-origin:center top;animation:sva-a74b93497797-sva-kpi-confidence-ring-shake 3s ease-in-out infinite}#sva-a74b93497797-sva-kpi-confidence-ring .slide{transform-box:fill-box;transform-origin:center;animation:sva-a74b93497797-sva-kpi-confidence-ring-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .sweep{animation:sva-a74b93497797-sva-kpi-confidence-ring-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .travel{animation:sva-a74b93497797-sva-kpi-confidence-ring-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-a74b93497797-sva-kpi-confidence-ring-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .d2{animation-delay:-.7s}#sva-a74b93497797-sva-kpi-confidence-ring .d3{animation-delay:-1.35s}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-spin{to{transform:rotate(360deg)}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-reverse{to{transform:rotate(-360deg)}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-a74b93497797-sva-kpi-confidence-ring *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><circle cx="80" cy="80" r="48" fill="none" stroke="#10B981" stroke-opacity=".18" stroke-width="10"/><circle class="dash" cx="80" cy="80" r="48" fill="none" stroke="url(#sva-a74b93497797-sva-kpi-confidence-ring-g)" stroke-width="10" stroke-linecap="round" stroke-dasharray="217 302" transform="rotate(-90 80 80)"/><text x="80" y="88" fill="#ECFDF5" font-size="27" font-weight="700" text-anchor="middle" font-family="system-ui,sans-serif">72%</text></svg>

Free Hero Motion

Hero Spotlight Sweep

A soft spotlight scans a premium product silhouette.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-25e1ed7af190-sva-hero-spotlight-sweep" role="img" aria-labelledby="sva-25e1ed7af190-sva-hero-spotlight-sweep-title sva-25e1ed7af190-sva-hero-spotlight-sweep-desc"><title id="sva-25e1ed7af190-sva-hero-spotlight-sweep-title">Hero Spotlight Sweep</title><desc id="sva-25e1ed7af190-sva-hero-spotlight-sweep-desc">A soft spotlight scans a premium product silhouette.</desc><defs><linearGradient id="sva-25e1ed7af190-sva-hero-spotlight-sweep-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F97316"/><stop offset="1" stop-color="#FACC15"/></linearGradient></defs><style>#sva-25e1ed7af190-sva-hero-spotlight-sweep{overflow:visible;background:#07111f}#sva-25e1ed7af190-sva-hero-spotlight-sweep .spin{transform-box:fill-box;transform-origin:center;animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-spin 5s linear infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .reverse{transform-box:fill-box;transform-origin:center;animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-reverse 4s linear infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .pulse{transform-box:fill-box;transform-origin:center;animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .float{transform-box:fill-box;transform-origin:center;animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .dash{animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .pop{transform-box:fill-box;transform-origin:center;animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .shake{transform-box:fill-box;transform-origin:center top;animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-shake 3s ease-in-out infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .slide{transform-box:fill-box;transform-origin:center;animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .sweep{animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .travel{animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-25e1ed7af190-sva-hero-spotlight-sweep-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-25e1ed7af190-sva-hero-spotlight-sweep .d2{animation-delay:-.7s}#sva-25e1ed7af190-sva-hero-spotlight-sweep .d3{animation-delay:-1.35s}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-spin{to{transform:rotate(360deg)}}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-reverse{to{transform:rotate(-360deg)}}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-25e1ed7af190-sva-hero-spotlight-sweep-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-25e1ed7af190-sva-hero-spotlight-sweep *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#F97316" stroke-opacity=".2" stroke-width="2"/><path class="sweep" d="M40 31h26l35 98H61z" fill="url(#sva-25e1ed7af190-sva-hero-spotlight-sweep-g)" opacity=".45"/><rect x="56" y="48" width="48" height="75" rx="17" fill="#F97316" fill-opacity=".2" stroke="#FFF7ED" stroke-width="3"/><circle class="pulse" cx="80" cy="81" r="17" fill="#FACC15" fill-opacity=".65"/></svg>

Free Hero Motion

Interactive Cursor Demo

A cursor glides to a product control and triggers feedback.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-d64e1f87cd5c-sva-interactive-cursor-demo" role="img" aria-labelledby="sva-d64e1f87cd5c-sva-interactive-cursor-demo-title sva-d64e1f87cd5c-sva-interactive-cursor-demo-desc"><title id="sva-d64e1f87cd5c-sva-interactive-cursor-demo-title">Interactive Cursor Demo</title><desc id="sva-d64e1f87cd5c-sva-interactive-cursor-demo-desc">A cursor glides to a product control and triggers feedback.</desc><defs><linearGradient id="sva-d64e1f87cd5c-sva-interactive-cursor-demo-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F97316"/><stop offset="1" stop-color="#FACC15"/></linearGradient></defs><style>#sva-d64e1f87cd5c-sva-interactive-cursor-demo{overflow:visible;background:#07111f}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .spin{transform-box:fill-box;transform-origin:center;animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-spin 5s linear infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .reverse{transform-box:fill-box;transform-origin:center;animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-reverse 4s linear infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .pulse{transform-box:fill-box;transform-origin:center;animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .float{transform-box:fill-box;transform-origin:center;animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .dash{animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .pop{transform-box:fill-box;transform-origin:center;animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .shake{transform-box:fill-box;transform-origin:center top;animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-shake 3s ease-in-out infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .slide{transform-box:fill-box;transform-origin:center;animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .sweep{animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .travel{animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-d64e1f87cd5c-sva-interactive-cursor-demo-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .d2{animation-delay:-.7s}#sva-d64e1f87cd5c-sva-interactive-cursor-demo .d3{animation-delay:-1.35s}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-spin{to{transform:rotate(360deg)}}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-reverse{to{transform:rotate(-360deg)}}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-d64e1f87cd5c-sva-interactive-cursor-demo-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-d64e1f87cd5c-sva-interactive-cursor-demo *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#F97316" stroke-opacity=".2" stroke-width="2"/><rect x="31" y="33" width="98" height="89" rx="20" fill="#F97316" fill-opacity=".12" stroke="#F97316" stroke-width="3"/><rect x="53" y="61" width="54" height="31" rx="10" fill="url(#sva-d64e1f87cd5c-sva-interactive-cursor-demo-g)"/><g class="travel"><path d="M75 70l20 49 7-19 19-7z" fill="#FFF7ED" stroke="#0B1220" stroke-width="3"/><circle class="pulse" cx="102" cy="82" r="13" fill="none" stroke="#FACC15" stroke-width="4"/></g></svg>

Free Hero Motion

Global Reach Pulse

A stylized globe with longitude motion and location pulses.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-e80176433127-sva-global-reach-pulse" role="img" aria-labelledby="sva-e80176433127-sva-global-reach-pulse-title sva-e80176433127-sva-global-reach-pulse-desc"><title id="sva-e80176433127-sva-global-reach-pulse-title">Global Reach Pulse</title><desc id="sva-e80176433127-sva-global-reach-pulse-desc">A stylized globe with longitude motion and location pulses.</desc><defs><linearGradient id="sva-e80176433127-sva-global-reach-pulse-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F97316"/><stop offset="1" stop-color="#FACC15"/></linearGradient></defs><style>#sva-e80176433127-sva-global-reach-pulse{overflow:visible;background:#07111f}#sva-e80176433127-sva-global-reach-pulse .spin{transform-box:fill-box;transform-origin:center;animation:sva-e80176433127-sva-global-reach-pulse-spin 5s linear infinite}#sva-e80176433127-sva-global-reach-pulse .reverse{transform-box:fill-box;transform-origin:center;animation:sva-e80176433127-sva-global-reach-pulse-reverse 4s linear infinite}#sva-e80176433127-sva-global-reach-pulse .pulse{transform-box:fill-box;transform-origin:center;animation:sva-e80176433127-sva-global-reach-pulse-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-e80176433127-sva-global-reach-pulse .float{transform-box:fill-box;transform-origin:center;animation:sva-e80176433127-sva-global-reach-pulse-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-e80176433127-sva-global-reach-pulse .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-e80176433127-sva-global-reach-pulse-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-e80176433127-sva-global-reach-pulse .dash{animation:sva-e80176433127-sva-global-reach-pulse-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-e80176433127-sva-global-reach-pulse .pop{transform-box:fill-box;transform-origin:center;animation:sva-e80176433127-sva-global-reach-pulse-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-e80176433127-sva-global-reach-pulse .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-e80176433127-sva-global-reach-pulse-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-e80176433127-sva-global-reach-pulse .shake{transform-box:fill-box;transform-origin:center top;animation:sva-e80176433127-sva-global-reach-pulse-shake 3s ease-in-out infinite}#sva-e80176433127-sva-global-reach-pulse .slide{transform-box:fill-box;transform-origin:center;animation:sva-e80176433127-sva-global-reach-pulse-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-e80176433127-sva-global-reach-pulse .sweep{animation:sva-e80176433127-sva-global-reach-pulse-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-e80176433127-sva-global-reach-pulse .travel{animation:sva-e80176433127-sva-global-reach-pulse-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-e80176433127-sva-global-reach-pulse .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-e80176433127-sva-global-reach-pulse-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-e80176433127-sva-global-reach-pulse .d2{animation-delay:-.7s}#sva-e80176433127-sva-global-reach-pulse .d3{animation-delay:-1.35s}@keyframes sva-e80176433127-sva-global-reach-pulse-spin{to{transform:rotate(360deg)}}@keyframes sva-e80176433127-sva-global-reach-pulse-reverse{to{transform:rotate(-360deg)}}@keyframes sva-e80176433127-sva-global-reach-pulse-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-e80176433127-sva-global-reach-pulse-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-e80176433127-sva-global-reach-pulse-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-e80176433127-sva-global-reach-pulse-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-e80176433127-sva-global-reach-pulse-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-e80176433127-sva-global-reach-pulse-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-e80176433127-sva-global-reach-pulse-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-e80176433127-sva-global-reach-pulse-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-e80176433127-sva-global-reach-pulse-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-e80176433127-sva-global-reach-pulse-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-e80176433127-sva-global-reach-pulse-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-e80176433127-sva-global-reach-pulse *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#F97316" stroke-opacity=".2" stroke-width="2"/><circle cx="80" cy="80" r="50" fill="#F97316" fill-opacity=".12" stroke="#FFF7ED" stroke-width="3"/><g class="spin" fill="none" stroke="#F97316" stroke-width="3"><ellipse cx="80" cy="80" rx="22" ry="50"/><path d="M31 80h98M41 55h78M41 105h78"/></g><g fill="#FACC15"><circle class="pulse" cx="56" cy="63" r="6"/><circle class="pulse d2" cx="106" cy="91" r="6"/></g></svg>

Free Hero Motion

Wordmark Line Reveal

Brand bars draw in with a quiet underline sweep.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-b462fbcba822-sva-wordmark-line-reveal" role="img" aria-labelledby="sva-b462fbcba822-sva-wordmark-line-reveal-title sva-b462fbcba822-sva-wordmark-line-reveal-desc"><title id="sva-b462fbcba822-sva-wordmark-line-reveal-title">Wordmark Line Reveal</title><desc id="sva-b462fbcba822-sva-wordmark-line-reveal-desc">Brand bars draw in with a quiet underline sweep.</desc><defs><linearGradient id="sva-b462fbcba822-sva-wordmark-line-reveal-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F97316"/><stop offset="1" stop-color="#FACC15"/></linearGradient></defs><style>#sva-b462fbcba822-sva-wordmark-line-reveal{overflow:visible;background:#07111f}#sva-b462fbcba822-sva-wordmark-line-reveal .spin{transform-box:fill-box;transform-origin:center;animation:sva-b462fbcba822-sva-wordmark-line-reveal-spin 5s linear infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .reverse{transform-box:fill-box;transform-origin:center;animation:sva-b462fbcba822-sva-wordmark-line-reveal-reverse 4s linear infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .pulse{transform-box:fill-box;transform-origin:center;animation:sva-b462fbcba822-sva-wordmark-line-reveal-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .float{transform-box:fill-box;transform-origin:center;animation:sva-b462fbcba822-sva-wordmark-line-reveal-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-b462fbcba822-sva-wordmark-line-reveal-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .dash{animation:sva-b462fbcba822-sva-wordmark-line-reveal-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .pop{transform-box:fill-box;transform-origin:center;animation:sva-b462fbcba822-sva-wordmark-line-reveal-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-b462fbcba822-sva-wordmark-line-reveal-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .shake{transform-box:fill-box;transform-origin:center top;animation:sva-b462fbcba822-sva-wordmark-line-reveal-shake 3s ease-in-out infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .slide{transform-box:fill-box;transform-origin:center;animation:sva-b462fbcba822-sva-wordmark-line-reveal-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .sweep{animation:sva-b462fbcba822-sva-wordmark-line-reveal-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .travel{animation:sva-b462fbcba822-sva-wordmark-line-reveal-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-b462fbcba822-sva-wordmark-line-reveal-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-b462fbcba822-sva-wordmark-line-reveal .d2{animation-delay:-.7s}#sva-b462fbcba822-sva-wordmark-line-reveal .d3{animation-delay:-1.35s}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-spin{to{transform:rotate(360deg)}}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-reverse{to{transform:rotate(-360deg)}}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-b462fbcba822-sva-wordmark-line-reveal-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-b462fbcba822-sva-wordmark-line-reveal *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#F97316" stroke-opacity=".2" stroke-width="2"/><g fill="none" stroke="#FFF7ED" stroke-width="8" stroke-linecap="round"><path class="draw" d="M35 55h90M35 80h69M35 105h82"/></g><path class="sweep" d="M34 122h92" stroke="#FACC15" stroke-width="5" stroke-linecap="round"/><circle class="pulse" cx="126" cy="55" r="7" fill="#F97316"/></svg>

Free Hero Motion

Product Orbit Showcase

A product card floats while feature particles orbit it.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-7471b19c5782-sva-product-orbit-showcase" role="img" aria-labelledby="sva-7471b19c5782-sva-product-orbit-showcase-title sva-7471b19c5782-sva-product-orbit-showcase-desc"><title id="sva-7471b19c5782-sva-product-orbit-showcase-title">Product Orbit Showcase</title><desc id="sva-7471b19c5782-sva-product-orbit-showcase-desc">A product card floats while feature particles orbit it.</desc><defs><linearGradient id="sva-7471b19c5782-sva-product-orbit-showcase-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F97316"/><stop offset="1" stop-color="#FACC15"/></linearGradient></defs><style>#sva-7471b19c5782-sva-product-orbit-showcase{overflow:visible;background:#07111f}#sva-7471b19c5782-sva-product-orbit-showcase .spin{transform-box:fill-box;transform-origin:center;animation:sva-7471b19c5782-sva-product-orbit-showcase-spin 5s linear infinite}#sva-7471b19c5782-sva-product-orbit-showcase .reverse{transform-box:fill-box;transform-origin:center;animation:sva-7471b19c5782-sva-product-orbit-showcase-reverse 4s linear infinite}#sva-7471b19c5782-sva-product-orbit-showcase .pulse{transform-box:fill-box;transform-origin:center;animation:sva-7471b19c5782-sva-product-orbit-showcase-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-7471b19c5782-sva-product-orbit-showcase .float{transform-box:fill-box;transform-origin:center;animation:sva-7471b19c5782-sva-product-orbit-showcase-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7471b19c5782-sva-product-orbit-showcase .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-7471b19c5782-sva-product-orbit-showcase-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-7471b19c5782-sva-product-orbit-showcase .dash{animation:sva-7471b19c5782-sva-product-orbit-showcase-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7471b19c5782-sva-product-orbit-showcase .pop{transform-box:fill-box;transform-origin:center;animation:sva-7471b19c5782-sva-product-orbit-showcase-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-7471b19c5782-sva-product-orbit-showcase .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-7471b19c5782-sva-product-orbit-showcase-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-7471b19c5782-sva-product-orbit-showcase .shake{transform-box:fill-box;transform-origin:center top;animation:sva-7471b19c5782-sva-product-orbit-showcase-shake 3s ease-in-out infinite}#sva-7471b19c5782-sva-product-orbit-showcase .slide{transform-box:fill-box;transform-origin:center;animation:sva-7471b19c5782-sva-product-orbit-showcase-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7471b19c5782-sva-product-orbit-showcase .sweep{animation:sva-7471b19c5782-sva-product-orbit-showcase-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7471b19c5782-sva-product-orbit-showcase .travel{animation:sva-7471b19c5782-sva-product-orbit-showcase-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7471b19c5782-sva-product-orbit-showcase .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-7471b19c5782-sva-product-orbit-showcase-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-7471b19c5782-sva-product-orbit-showcase .d2{animation-delay:-.7s}#sva-7471b19c5782-sva-product-orbit-showcase .d3{animation-delay:-1.35s}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-spin{to{transform:rotate(360deg)}}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-reverse{to{transform:rotate(-360deg)}}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-7471b19c5782-sva-product-orbit-showcase-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-7471b19c5782-sva-product-orbit-showcase *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#F97316" stroke-opacity=".2" stroke-width="2"/><g class="float"><rect x="48" y="43" width="64" height="76" rx="15" fill="#F97316" fill-opacity=".18" stroke="#FFF7ED" stroke-width="3"/><rect x="59" y="57" width="42" height="27" rx="8" fill="url(#sva-7471b19c5782-sva-product-orbit-showcase-g)"/><path d="M61 96h38M61 105h27" stroke="#FFF7ED" stroke-width="4" stroke-linecap="round" opacity=".75"/></g><g class="spin" fill="#FACC15"><circle cx="80" cy="22" r="6"/><circle cx="138" cy="80" r="5"/><circle cx="80" cy="138" r="6"/><circle cx="22" cy="80" r="5"/></g></svg>

Free Hero Motion

Data Stream Portal

Data packets travel through a layered product portal.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-f0d9319966f5-sva-data-stream-portal" role="img" aria-labelledby="sva-f0d9319966f5-sva-data-stream-portal-title sva-f0d9319966f5-sva-data-stream-portal-desc"><title id="sva-f0d9319966f5-sva-data-stream-portal-title">Data Stream Portal</title><desc id="sva-f0d9319966f5-sva-data-stream-portal-desc">Data packets travel through a layered product portal.</desc><defs><linearGradient id="sva-f0d9319966f5-sva-data-stream-portal-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F97316"/><stop offset="1" stop-color="#FACC15"/></linearGradient></defs><style>#sva-f0d9319966f5-sva-data-stream-portal{overflow:visible;background:#07111f}#sva-f0d9319966f5-sva-data-stream-portal .spin{transform-box:fill-box;transform-origin:center;animation:sva-f0d9319966f5-sva-data-stream-portal-spin 5s linear infinite}#sva-f0d9319966f5-sva-data-stream-portal .reverse{transform-box:fill-box;transform-origin:center;animation:sva-f0d9319966f5-sva-data-stream-portal-reverse 4s linear infinite}#sva-f0d9319966f5-sva-data-stream-portal .pulse{transform-box:fill-box;transform-origin:center;animation:sva-f0d9319966f5-sva-data-stream-portal-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-f0d9319966f5-sva-data-stream-portal .float{transform-box:fill-box;transform-origin:center;animation:sva-f0d9319966f5-sva-data-stream-portal-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f0d9319966f5-sva-data-stream-portal .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-f0d9319966f5-sva-data-stream-portal-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-f0d9319966f5-sva-data-stream-portal .dash{animation:sva-f0d9319966f5-sva-data-stream-portal-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f0d9319966f5-sva-data-stream-portal .pop{transform-box:fill-box;transform-origin:center;animation:sva-f0d9319966f5-sva-data-stream-portal-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-f0d9319966f5-sva-data-stream-portal .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-f0d9319966f5-sva-data-stream-portal-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-f0d9319966f5-sva-data-stream-portal .shake{transform-box:fill-box;transform-origin:center top;animation:sva-f0d9319966f5-sva-data-stream-portal-shake 3s ease-in-out infinite}#sva-f0d9319966f5-sva-data-stream-portal .slide{transform-box:fill-box;transform-origin:center;animation:sva-f0d9319966f5-sva-data-stream-portal-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f0d9319966f5-sva-data-stream-portal .sweep{animation:sva-f0d9319966f5-sva-data-stream-portal-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f0d9319966f5-sva-data-stream-portal .travel{animation:sva-f0d9319966f5-sva-data-stream-portal-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f0d9319966f5-sva-data-stream-portal .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-f0d9319966f5-sva-data-stream-portal-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-f0d9319966f5-sva-data-stream-portal .d2{animation-delay:-.7s}#sva-f0d9319966f5-sva-data-stream-portal .d3{animation-delay:-1.35s}@keyframes sva-f0d9319966f5-sva-data-stream-portal-spin{to{transform:rotate(360deg)}}@keyframes sva-f0d9319966f5-sva-data-stream-portal-reverse{to{transform:rotate(-360deg)}}@keyframes sva-f0d9319966f5-sva-data-stream-portal-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-f0d9319966f5-sva-data-stream-portal-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-f0d9319966f5-sva-data-stream-portal-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-f0d9319966f5-sva-data-stream-portal-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-f0d9319966f5-sva-data-stream-portal-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-f0d9319966f5-sva-data-stream-portal-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-f0d9319966f5-sva-data-stream-portal-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-f0d9319966f5-sva-data-stream-portal-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-f0d9319966f5-sva-data-stream-portal-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-f0d9319966f5-sva-data-stream-portal-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-f0d9319966f5-sva-data-stream-portal-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-f0d9319966f5-sva-data-stream-portal *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#F97316" stroke-opacity=".2" stroke-width="2"/><rect x="31" y="37" width="98" height="86" rx="20" fill="#F97316" fill-opacity=".12" stroke="#F97316" stroke-width="3"/><rect x="56" y="55" width="48" height="50" rx="12" fill="url(#sva-f0d9319966f5-sva-data-stream-portal-g)"/><g fill="#FFF7ED"><circle class="travel" cx="80" cy="68" r="5"/><circle class="travel d2" cx="80" cy="80" r="5"/><circle class="travel d3" cx="80" cy="92" r="5"/></g></svg>

Free Hero Motion

Network Bloom Scene

Connected nodes reveal outward from a bright central hub.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-281ed26efc47-sva-network-bloom-scene" role="img" aria-labelledby="sva-281ed26efc47-sva-network-bloom-scene-title sva-281ed26efc47-sva-network-bloom-scene-desc"><title id="sva-281ed26efc47-sva-network-bloom-scene-title">Network Bloom Scene</title><desc id="sva-281ed26efc47-sva-network-bloom-scene-desc">Connected nodes reveal outward from a bright central hub.</desc><defs><linearGradient id="sva-281ed26efc47-sva-network-bloom-scene-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F97316"/><stop offset="1" stop-color="#FACC15"/></linearGradient></defs><style>#sva-281ed26efc47-sva-network-bloom-scene{overflow:visible;background:#07111f}#sva-281ed26efc47-sva-network-bloom-scene .spin{transform-box:fill-box;transform-origin:center;animation:sva-281ed26efc47-sva-network-bloom-scene-spin 5s linear infinite}#sva-281ed26efc47-sva-network-bloom-scene .reverse{transform-box:fill-box;transform-origin:center;animation:sva-281ed26efc47-sva-network-bloom-scene-reverse 4s linear infinite}#sva-281ed26efc47-sva-network-bloom-scene .pulse{transform-box:fill-box;transform-origin:center;animation:sva-281ed26efc47-sva-network-bloom-scene-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-281ed26efc47-sva-network-bloom-scene .float{transform-box:fill-box;transform-origin:center;animation:sva-281ed26efc47-sva-network-bloom-scene-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-281ed26efc47-sva-network-bloom-scene .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-281ed26efc47-sva-network-bloom-scene-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-281ed26efc47-sva-network-bloom-scene .dash{animation:sva-281ed26efc47-sva-network-bloom-scene-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-281ed26efc47-sva-network-bloom-scene .pop{transform-box:fill-box;transform-origin:center;animation:sva-281ed26efc47-sva-network-bloom-scene-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-281ed26efc47-sva-network-bloom-scene .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-281ed26efc47-sva-network-bloom-scene-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-281ed26efc47-sva-network-bloom-scene .shake{transform-box:fill-box;transform-origin:center top;animation:sva-281ed26efc47-sva-network-bloom-scene-shake 3s ease-in-out infinite}#sva-281ed26efc47-sva-network-bloom-scene .slide{transform-box:fill-box;transform-origin:center;animation:sva-281ed26efc47-sva-network-bloom-scene-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-281ed26efc47-sva-network-bloom-scene .sweep{animation:sva-281ed26efc47-sva-network-bloom-scene-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-281ed26efc47-sva-network-bloom-scene .travel{animation:sva-281ed26efc47-sva-network-bloom-scene-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-281ed26efc47-sva-network-bloom-scene .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-281ed26efc47-sva-network-bloom-scene-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-281ed26efc47-sva-network-bloom-scene .d2{animation-delay:-.7s}#sva-281ed26efc47-sva-network-bloom-scene .d3{animation-delay:-1.35s}@keyframes sva-281ed26efc47-sva-network-bloom-scene-spin{to{transform:rotate(360deg)}}@keyframes sva-281ed26efc47-sva-network-bloom-scene-reverse{to{transform:rotate(-360deg)}}@keyframes sva-281ed26efc47-sva-network-bloom-scene-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-281ed26efc47-sva-network-bloom-scene-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-281ed26efc47-sva-network-bloom-scene-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-281ed26efc47-sva-network-bloom-scene-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-281ed26efc47-sva-network-bloom-scene-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-281ed26efc47-sva-network-bloom-scene-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-281ed26efc47-sva-network-bloom-scene-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-281ed26efc47-sva-network-bloom-scene-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-281ed26efc47-sva-network-bloom-scene-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-281ed26efc47-sva-network-bloom-scene-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-281ed26efc47-sva-network-bloom-scene-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-281ed26efc47-sva-network-bloom-scene *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#F97316" stroke-opacity=".2" stroke-width="2"/><g stroke="#F97316" stroke-width="3" stroke-opacity=".6"><path class="draw" d="M80 80L41 43M80 80l41-36M80 80l38 40M80 80l-44 36"/></g><g fill="url(#sva-281ed26efc47-sva-network-bloom-scene-g)"><circle class="pulse" cx="80" cy="80" r="13"/><circle class="pop" cx="41" cy="43" r="9"/><circle class="pop d2" cx="121" cy="44" r="9"/><circle class="pop d3" cx="118" cy="120" r="9"/><circle class="pop" cx="36" cy="116" r="9"/></g></svg>

Free Hero Motion

Rocket Arc Launch

A compact launch scene with lift, trail, stars, and orbital arc.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-44bfc62a7fa6-sva-rocket-arc-launch" role="img" aria-labelledby="sva-44bfc62a7fa6-sva-rocket-arc-launch-title sva-44bfc62a7fa6-sva-rocket-arc-launch-desc"><title id="sva-44bfc62a7fa6-sva-rocket-arc-launch-title">Rocket Arc Launch</title><desc id="sva-44bfc62a7fa6-sva-rocket-arc-launch-desc">A compact launch scene with lift, trail, stars, and orbital arc.</desc><defs><linearGradient id="sva-44bfc62a7fa6-sva-rocket-arc-launch-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F97316"/><stop offset="1" stop-color="#FACC15"/></linearGradient></defs><style>#sva-44bfc62a7fa6-sva-rocket-arc-launch{overflow:visible;background:#07111f}#sva-44bfc62a7fa6-sva-rocket-arc-launch .spin{transform-box:fill-box;transform-origin:center;animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-spin 5s linear infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .reverse{transform-box:fill-box;transform-origin:center;animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-reverse 4s linear infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .pulse{transform-box:fill-box;transform-origin:center;animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .float{transform-box:fill-box;transform-origin:center;animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .dash{animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .pop{transform-box:fill-box;transform-origin:center;animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .shake{transform-box:fill-box;transform-origin:center top;animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-shake 3s ease-in-out infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .slide{transform-box:fill-box;transform-origin:center;animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .sweep{animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .travel{animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-44bfc62a7fa6-sva-rocket-arc-launch-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-44bfc62a7fa6-sva-rocket-arc-launch .d2{animation-delay:-.7s}#sva-44bfc62a7fa6-sva-rocket-arc-launch .d3{animation-delay:-1.35s}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-spin{to{transform:rotate(360deg)}}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-reverse{to{transform:rotate(-360deg)}}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-44bfc62a7fa6-sva-rocket-arc-launch-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-44bfc62a7fa6-sva-rocket-arc-launch *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#F97316" stroke-opacity=".2" stroke-width="2"/><path d="M26 126c22-38 46-60 83-84" fill="none" stroke="#F97316" stroke-opacity=".25" stroke-width="3" stroke-dasharray="7 8"/><g class="float"><path d="M71 91c8-32 26-51 53-58-2 29-17 50-46 62z" fill="url(#sva-44bfc62a7fa6-sva-rocket-arc-launch-g)" stroke="#FFF7ED" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="102" cy="56" r="9" fill="#0B1220" stroke="#FFF7ED" stroke-width="3"/><path d="M73 84l-17 5 11 11zM88 94l-2 18 14-14z" fill="#FACC15"/><path class="pulse" d="M66 101l-17 19 25-12z" fill="#FACC15"/></g><g fill="#FACC15"><circle class="pulse" cx="39" cy="44" r="4"/><circle class="pulse d2" cx="122" cy="115" r="3"/></g></svg>

Free Loaders

Waveform Scan Loader

Responsive-looking waveform bars animate around a center pulse.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-b14a76c10539-sva-waveform-scan-loader" role="img" aria-labelledby="sva-b14a76c10539-sva-waveform-scan-loader-title sva-b14a76c10539-sva-waveform-scan-loader-desc"><title id="sva-b14a76c10539-sva-waveform-scan-loader-title">Waveform Scan Loader</title><desc id="sva-b14a76c10539-sva-waveform-scan-loader-desc">Responsive-looking waveform bars animate around a center pulse.</desc><defs><linearGradient id="sva-b14a76c10539-sva-waveform-scan-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-b14a76c10539-sva-waveform-scan-loader{overflow:visible;background:#07111f}#sva-b14a76c10539-sva-waveform-scan-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-b14a76c10539-sva-waveform-scan-loader-spin 5s linear infinite}#sva-b14a76c10539-sva-waveform-scan-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-b14a76c10539-sva-waveform-scan-loader-reverse 4s linear infinite}#sva-b14a76c10539-sva-waveform-scan-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-b14a76c10539-sva-waveform-scan-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-b14a76c10539-sva-waveform-scan-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-b14a76c10539-sva-waveform-scan-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .dash{animation:sva-b14a76c10539-sva-waveform-scan-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-b14a76c10539-sva-waveform-scan-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-b14a76c10539-sva-waveform-scan-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-b14a76c10539-sva-waveform-scan-loader-shake 3s ease-in-out infinite}#sva-b14a76c10539-sva-waveform-scan-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-b14a76c10539-sva-waveform-scan-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .sweep{animation:sva-b14a76c10539-sva-waveform-scan-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .travel{animation:sva-b14a76c10539-sva-waveform-scan-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-b14a76c10539-sva-waveform-scan-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .d2{animation-delay:-.7s}#sva-b14a76c10539-sva-waveform-scan-loader .d3{animation-delay:-1.35s}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-b14a76c10539-sva-waveform-scan-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><g fill="url(#sva-b14a76c10539-sva-waveform-scan-loader-g)"><rect class="rise" x="30" y="61" width="10" height="38" rx="5"/><rect class="rise d2" x="48" y="45" width="10" height="70" rx="5"/><rect class="rise d3" x="66" y="29" width="10" height="102" rx="5"/><rect class="rise" x="84" y="38" width="10" height="84" rx="5"/><rect class="rise d2" x="102" y="52" width="10" height="56" rx="5"/><rect class="rise d3" x="120" y="66" width="10" height="28" rx="5"/></g></svg>

Free Loaders

Quantum Orbit Loader

Three elliptical orbits and particles form an atomic loader.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-97792cf3edae-sva-quantum-orbit-loader" role="img" aria-labelledby="sva-97792cf3edae-sva-quantum-orbit-loader-title sva-97792cf3edae-sva-quantum-orbit-loader-desc"><title id="sva-97792cf3edae-sva-quantum-orbit-loader-title">Quantum Orbit Loader</title><desc id="sva-97792cf3edae-sva-quantum-orbit-loader-desc">Three elliptical orbits and particles form an atomic loader.</desc><defs><linearGradient id="sva-97792cf3edae-sva-quantum-orbit-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-97792cf3edae-sva-quantum-orbit-loader{overflow:visible;background:#07111f}#sva-97792cf3edae-sva-quantum-orbit-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-97792cf3edae-sva-quantum-orbit-loader-spin 5s linear infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-97792cf3edae-sva-quantum-orbit-loader-reverse 4s linear infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-97792cf3edae-sva-quantum-orbit-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-97792cf3edae-sva-quantum-orbit-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-97792cf3edae-sva-quantum-orbit-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .dash{animation:sva-97792cf3edae-sva-quantum-orbit-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-97792cf3edae-sva-quantum-orbit-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-97792cf3edae-sva-quantum-orbit-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-97792cf3edae-sva-quantum-orbit-loader-shake 3s ease-in-out infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-97792cf3edae-sva-quantum-orbit-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .sweep{animation:sva-97792cf3edae-sva-quantum-orbit-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .travel{animation:sva-97792cf3edae-sva-quantum-orbit-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-97792cf3edae-sva-quantum-orbit-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .d2{animation-delay:-.7s}#sva-97792cf3edae-sva-quantum-orbit-loader .d3{animation-delay:-1.35s}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-97792cf3edae-sva-quantum-orbit-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><g class="spin" fill="none" stroke="#0EA5E9" stroke-width="3"><ellipse cx="80" cy="80" rx="54" ry="21"/><ellipse cx="80" cy="80" rx="54" ry="21" transform="rotate(60 80 80)"/><ellipse cx="80" cy="80" rx="54" ry="21" transform="rotate(120 80 80)"/></g><circle class="pulse" cx="80" cy="80" r="10" fill="#A78BFA"/><circle class="pop" cx="129" cy="80" r="6" fill="#F8FAFC"/></svg>

Free Loaders

Hexa Phase Loader

Nested hexagons phase through rotation and scale.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-82e962148260-sva-hexa-phase-loader" role="img" aria-labelledby="sva-82e962148260-sva-hexa-phase-loader-title sva-82e962148260-sva-hexa-phase-loader-desc"><title id="sva-82e962148260-sva-hexa-phase-loader-title">Hexa Phase Loader</title><desc id="sva-82e962148260-sva-hexa-phase-loader-desc">Nested hexagons phase through rotation and scale.</desc><defs><linearGradient id="sva-82e962148260-sva-hexa-phase-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-82e962148260-sva-hexa-phase-loader{overflow:visible;background:#07111f}#sva-82e962148260-sva-hexa-phase-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-82e962148260-sva-hexa-phase-loader-spin 5s linear infinite}#sva-82e962148260-sva-hexa-phase-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-82e962148260-sva-hexa-phase-loader-reverse 4s linear infinite}#sva-82e962148260-sva-hexa-phase-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-82e962148260-sva-hexa-phase-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-82e962148260-sva-hexa-phase-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-82e962148260-sva-hexa-phase-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .dash{animation:sva-82e962148260-sva-hexa-phase-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-82e962148260-sva-hexa-phase-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-82e962148260-sva-hexa-phase-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-82e962148260-sva-hexa-phase-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-82e962148260-sva-hexa-phase-loader-shake 3s ease-in-out infinite}#sva-82e962148260-sva-hexa-phase-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-82e962148260-sva-hexa-phase-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .sweep{animation:sva-82e962148260-sva-hexa-phase-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .travel{animation:sva-82e962148260-sva-hexa-phase-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-82e962148260-sva-hexa-phase-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .d2{animation-delay:-.7s}#sva-82e962148260-sva-hexa-phase-loader .d3{animation-delay:-1.35s}@keyframes sva-82e962148260-sva-hexa-phase-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-82e962148260-sva-hexa-phase-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-82e962148260-sva-hexa-phase-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-82e962148260-sva-hexa-phase-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-82e962148260-sva-hexa-phase-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-82e962148260-sva-hexa-phase-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-82e962148260-sva-hexa-phase-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-82e962148260-sva-hexa-phase-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-82e962148260-sva-hexa-phase-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-82e962148260-sva-hexa-phase-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-82e962148260-sva-hexa-phase-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-82e962148260-sva-hexa-phase-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-82e962148260-sva-hexa-phase-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-82e962148260-sva-hexa-phase-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><g class="spin"><path d="M80 24l49 28v56l-49 28-49-28V52z" fill="none" stroke="#0EA5E9" stroke-width="5"/><path d="M80 46l30 17v34l-30 17-30-17V63z" fill="#0EA5E9" fill-opacity=".14" stroke="#A78BFA" stroke-width="4"/></g><path class="pulse" d="M80 65l13 8v15l-13 8-13-8V73z" fill="#F8FAFC"/></svg>

Free Loaders

Infinity Flow Loader

An infinity path traces continuously with a soft leading glow.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-2b143d50d1e8-sva-infinity-flow-loader" role="img" aria-labelledby="sva-2b143d50d1e8-sva-infinity-flow-loader-title sva-2b143d50d1e8-sva-infinity-flow-loader-desc"><title id="sva-2b143d50d1e8-sva-infinity-flow-loader-title">Infinity Flow Loader</title><desc id="sva-2b143d50d1e8-sva-infinity-flow-loader-desc">An infinity path traces continuously with a soft leading glow.</desc><defs><linearGradient id="sva-2b143d50d1e8-sva-infinity-flow-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-2b143d50d1e8-sva-infinity-flow-loader{overflow:visible;background:#07111f}#sva-2b143d50d1e8-sva-infinity-flow-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-spin 5s linear infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-reverse 4s linear infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .dash{animation:sva-2b143d50d1e8-sva-infinity-flow-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-shake 3s ease-in-out infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .sweep{animation:sva-2b143d50d1e8-sva-infinity-flow-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .travel{animation:sva-2b143d50d1e8-sva-infinity-flow-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .d2{animation-delay:-.7s}#sva-2b143d50d1e8-sva-infinity-flow-loader .d3{animation-delay:-1.35s}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-2b143d50d1e8-sva-infinity-flow-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><path class="draw" d="M24 80c19-35 42-35 56 0 14 35 37 35 56 0-19-35-42-35-56 0-14 35-37 35-56 0z" fill="none" stroke="url(#sva-2b143d50d1e8-sva-infinity-flow-loader-g)" stroke-width="8" stroke-linecap="round"/><circle class="travel" cx="80" cy="80" r="6" fill="#F8FAFC"/></svg>

Free Loaders

Comet Ring Loader

A bright comet travels around a restrained progress ring.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-59b3490a2a69-sva-comet-ring-loader" role="img" aria-labelledby="sva-59b3490a2a69-sva-comet-ring-loader-title sva-59b3490a2a69-sva-comet-ring-loader-desc"><title id="sva-59b3490a2a69-sva-comet-ring-loader-title">Comet Ring Loader</title><desc id="sva-59b3490a2a69-sva-comet-ring-loader-desc">A bright comet travels around a restrained progress ring.</desc><defs><linearGradient id="sva-59b3490a2a69-sva-comet-ring-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-59b3490a2a69-sva-comet-ring-loader{overflow:visible;background:#07111f}#sva-59b3490a2a69-sva-comet-ring-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-59b3490a2a69-sva-comet-ring-loader-spin 5s linear infinite}#sva-59b3490a2a69-sva-comet-ring-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-59b3490a2a69-sva-comet-ring-loader-reverse 4s linear infinite}#sva-59b3490a2a69-sva-comet-ring-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-59b3490a2a69-sva-comet-ring-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-59b3490a2a69-sva-comet-ring-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-59b3490a2a69-sva-comet-ring-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .dash{animation:sva-59b3490a2a69-sva-comet-ring-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-59b3490a2a69-sva-comet-ring-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-59b3490a2a69-sva-comet-ring-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-59b3490a2a69-sva-comet-ring-loader-shake 3s ease-in-out infinite}#sva-59b3490a2a69-sva-comet-ring-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-59b3490a2a69-sva-comet-ring-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .sweep{animation:sva-59b3490a2a69-sva-comet-ring-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .travel{animation:sva-59b3490a2a69-sva-comet-ring-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-59b3490a2a69-sva-comet-ring-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .d2{animation-delay:-.7s}#sva-59b3490a2a69-sva-comet-ring-loader .d3{animation-delay:-1.35s}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-59b3490a2a69-sva-comet-ring-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><circle cx="80" cy="80" r="47" fill="none" stroke="#0EA5E9" stroke-opacity=".16" stroke-width="9"/><circle class="spin dash" cx="80" cy="80" r="47" fill="none" stroke="url(#sva-59b3490a2a69-sva-comet-ring-loader-g)" stroke-width="9" stroke-linecap="round" stroke-dasharray="92 203"/><circle class="pulse" cx="80" cy="80" r="9" fill="#A78BFA"/></svg>

Free Loaders

Pulse Matrix Loader

A precise 3-by-3 light matrix with staggered depth.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-56f6bcaa3c31-sva-pulse-matrix-loader" role="img" aria-labelledby="sva-56f6bcaa3c31-sva-pulse-matrix-loader-title sva-56f6bcaa3c31-sva-pulse-matrix-loader-desc"><title id="sva-56f6bcaa3c31-sva-pulse-matrix-loader-title">Pulse Matrix Loader</title><desc id="sva-56f6bcaa3c31-sva-pulse-matrix-loader-desc">A precise 3-by-3 light matrix with staggered depth.</desc><defs><linearGradient id="sva-56f6bcaa3c31-sva-pulse-matrix-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-56f6bcaa3c31-sva-pulse-matrix-loader{overflow:visible;background:#07111f}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-spin 5s linear infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-reverse 4s linear infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .dash{animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-shake 3s ease-in-out infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .sweep{animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .travel{animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .d2{animation-delay:-.7s}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .d3{animation-delay:-1.35s}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-56f6bcaa3c31-sva-pulse-matrix-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><g fill="#0EA5E9"><circle class="pulse" cx="52" cy="52" r="8"/><circle class="pulse d2" cx="80" cy="52" r="8"/><circle class="pulse d3" cx="108" cy="52" r="8"/><circle class="pulse d2" cx="52" cy="80" r="8"/><circle class="pulse d3" cx="80" cy="80" r="10" fill="#A78BFA"/><circle class="pulse" cx="108" cy="80" r="8"/><circle class="pulse d3" cx="52" cy="108" r="8"/><circle class="pulse" cx="80" cy="108" r="8"/><circle class="pulse d2" cx="108" cy="108" r="8"/></g></svg>

Free Loaders

Prism Loop Loader

Layered prism outlines rotate in opposing directions.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-0c3a7441e911-sva-prism-loop-loader" role="img" aria-labelledby="sva-0c3a7441e911-sva-prism-loop-loader-title sva-0c3a7441e911-sva-prism-loop-loader-desc"><title id="sva-0c3a7441e911-sva-prism-loop-loader-title">Prism Loop Loader</title><desc id="sva-0c3a7441e911-sva-prism-loop-loader-desc">Layered prism outlines rotate in opposing directions.</desc><defs><linearGradient id="sva-0c3a7441e911-sva-prism-loop-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-0c3a7441e911-sva-prism-loop-loader{overflow:visible;background:#07111f}#sva-0c3a7441e911-sva-prism-loop-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-0c3a7441e911-sva-prism-loop-loader-spin 5s linear infinite}#sva-0c3a7441e911-sva-prism-loop-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-0c3a7441e911-sva-prism-loop-loader-reverse 4s linear infinite}#sva-0c3a7441e911-sva-prism-loop-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-0c3a7441e911-sva-prism-loop-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-0c3a7441e911-sva-prism-loop-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-0c3a7441e911-sva-prism-loop-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .dash{animation:sva-0c3a7441e911-sva-prism-loop-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-0c3a7441e911-sva-prism-loop-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-0c3a7441e911-sva-prism-loop-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-0c3a7441e911-sva-prism-loop-loader-shake 3s ease-in-out infinite}#sva-0c3a7441e911-sva-prism-loop-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-0c3a7441e911-sva-prism-loop-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .sweep{animation:sva-0c3a7441e911-sva-prism-loop-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .travel{animation:sva-0c3a7441e911-sva-prism-loop-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-0c3a7441e911-sva-prism-loop-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .d2{animation-delay:-.7s}#sva-0c3a7441e911-sva-prism-loop-loader .d3{animation-delay:-1.35s}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-0c3a7441e911-sva-prism-loop-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><g class="spin"><path d="M80 28l48 84H32z" fill="none" stroke="url(#sva-0c3a7441e911-sva-prism-loop-loader-g)" stroke-width="5"/><path d="M80 45l31 55H49z" fill="#0EA5E9" fill-opacity=".15" stroke="#A78BFA" stroke-width="3"/></g><g class="reverse"><path d="M80 58l18 32H62z" fill="#F8FAFC" fill-opacity=".9"/></g></svg>

Free Loaders

Constellation Orbit Loader

Orbiting constellation nodes with a calm luminous rhythm.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-f9e22289a39a-sva-constellation-orbit-loader" role="img" aria-labelledby="sva-f9e22289a39a-sva-constellation-orbit-loader-title sva-f9e22289a39a-sva-constellation-orbit-loader-desc"><title id="sva-f9e22289a39a-sva-constellation-orbit-loader-title">Constellation Orbit Loader</title><desc id="sva-f9e22289a39a-sva-constellation-orbit-loader-desc">Orbiting constellation nodes with a calm luminous rhythm.</desc><defs><linearGradient id="sva-f9e22289a39a-sva-constellation-orbit-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-f9e22289a39a-sva-constellation-orbit-loader{overflow:visible;background:#07111f}#sva-f9e22289a39a-sva-constellation-orbit-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-spin 5s linear infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-reverse 4s linear infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .dash{animation:sva-f9e22289a39a-sva-constellation-orbit-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-shake 3s ease-in-out infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .sweep{animation:sva-f9e22289a39a-sva-constellation-orbit-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .travel{animation:sva-f9e22289a39a-sva-constellation-orbit-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .d2{animation-delay:-.7s}#sva-f9e22289a39a-sva-constellation-orbit-loader .d3{animation-delay:-1.35s}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-f9e22289a39a-sva-constellation-orbit-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><g class="spin"><circle cx="80" cy="80" r="45" fill="none" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><path d="M80 35l38 26-15 44-46 8-21-41z" fill="none" stroke="#0EA5E9" stroke-opacity=".45" stroke-width="2"/><g fill="url(#sva-f9e22289a39a-sva-constellation-orbit-loader-g)"><circle cx="80" cy="35" r="7"/><circle cx="118" cy="61" r="5"/><circle cx="103" cy="105" r="6"/><circle cx="57" cy="113" r="5"/><circle cx="36" cy="72" r="6"/></g></g><circle class="pulse" cx="80" cy="80" r="12" fill="#A78BFA"/></svg>

Free UI Motion

Aurora Secure Lock

Security confirmation with a settling shackle and check.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-c4c4a155223d-sva-aurora-secure-lock" role="img" aria-labelledby="sva-c4c4a155223d-sva-aurora-secure-lock-title sva-c4c4a155223d-sva-aurora-secure-lock-desc"><title id="sva-c4c4a155223d-sva-aurora-secure-lock-title">Aurora Secure Lock</title><desc id="sva-c4c4a155223d-sva-aurora-secure-lock-desc">Security confirmation with a settling shackle and check.</desc><defs><linearGradient id="sva-c4c4a155223d-sva-aurora-secure-lock-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7C3AED"/><stop offset="1" stop-color="#22D3EE"/></linearGradient></defs><style>#sva-c4c4a155223d-sva-aurora-secure-lock{overflow:visible;background:#07111f}#sva-c4c4a155223d-sva-aurora-secure-lock .spin{transform-box:fill-box;transform-origin:center;animation:sva-c4c4a155223d-sva-aurora-secure-lock-spin 5s linear infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .reverse{transform-box:fill-box;transform-origin:center;animation:sva-c4c4a155223d-sva-aurora-secure-lock-reverse 4s linear infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .pulse{transform-box:fill-box;transform-origin:center;animation:sva-c4c4a155223d-sva-aurora-secure-lock-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .float{transform-box:fill-box;transform-origin:center;animation:sva-c4c4a155223d-sva-aurora-secure-lock-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-c4c4a155223d-sva-aurora-secure-lock-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .dash{animation:sva-c4c4a155223d-sva-aurora-secure-lock-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .pop{transform-box:fill-box;transform-origin:center;animation:sva-c4c4a155223d-sva-aurora-secure-lock-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-c4c4a155223d-sva-aurora-secure-lock-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .shake{transform-box:fill-box;transform-origin:center top;animation:sva-c4c4a155223d-sva-aurora-secure-lock-shake 3s ease-in-out infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .slide{transform-box:fill-box;transform-origin:center;animation:sva-c4c4a155223d-sva-aurora-secure-lock-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .sweep{animation:sva-c4c4a155223d-sva-aurora-secure-lock-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .travel{animation:sva-c4c4a155223d-sva-aurora-secure-lock-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-c4c4a155223d-sva-aurora-secure-lock-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-c4c4a155223d-sva-aurora-secure-lock .d2{animation-delay:-.7s}#sva-c4c4a155223d-sva-aurora-secure-lock .d3{animation-delay:-1.35s}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-spin{to{transform:rotate(360deg)}}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-reverse{to{transform:rotate(-360deg)}}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-c4c4a155223d-sva-aurora-secure-lock-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-c4c4a155223d-sva-aurora-secure-lock *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#7C3AED" stroke-opacity=".2" stroke-width="2"/><path class="float" d="M55 69V54c0-34 50-34 50 0v15" fill="none" stroke="#F8FAFC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><rect x="42" y="66" width="76" height="60" rx="18" fill="#7C3AED" fill-opacity=".22" stroke="url(#sva-c4c4a155223d-sva-aurora-secure-lock-g)" stroke-width="4"/><path class="draw" d="M62 95l12 12 25-28" fill="none" stroke="#F8FAFC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

Free UI Motion

Aurora Favorite Bloom

Favorite action with a heart pulse and orbiting accents.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-b38e04812b8f-sva-aurora-favorite-bloom" role="img" aria-labelledby="sva-b38e04812b8f-sva-aurora-favorite-bloom-title sva-b38e04812b8f-sva-aurora-favorite-bloom-desc"><title id="sva-b38e04812b8f-sva-aurora-favorite-bloom-title">Aurora Favorite Bloom</title><desc id="sva-b38e04812b8f-sva-aurora-favorite-bloom-desc">Favorite action with a heart pulse and orbiting accents.</desc><defs><linearGradient id="sva-b38e04812b8f-sva-aurora-favorite-bloom-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7C3AED"/><stop offset="1" stop-color="#22D3EE"/></linearGradient></defs><style>#sva-b38e04812b8f-sva-aurora-favorite-bloom{overflow:visible;background:#07111f}#sva-b38e04812b8f-sva-aurora-favorite-bloom .spin{transform-box:fill-box;transform-origin:center;animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-spin 5s linear infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .reverse{transform-box:fill-box;transform-origin:center;animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-reverse 4s linear infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .pulse{transform-box:fill-box;transform-origin:center;animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .float{transform-box:fill-box;transform-origin:center;animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .dash{animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .pop{transform-box:fill-box;transform-origin:center;animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .shake{transform-box:fill-box;transform-origin:center top;animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-shake 3s ease-in-out infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .slide{transform-box:fill-box;transform-origin:center;animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .sweep{animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .travel{animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-b38e04812b8f-sva-aurora-favorite-bloom-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-b38e04812b8f-sva-aurora-favorite-bloom .d2{animation-delay:-.7s}#sva-b38e04812b8f-sva-aurora-favorite-bloom .d3{animation-delay:-1.35s}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-spin{to{transform:rotate(360deg)}}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-reverse{to{transform:rotate(-360deg)}}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-b38e04812b8f-sva-aurora-favorite-bloom-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-b38e04812b8f-sva-aurora-favorite-bloom *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#7C3AED" stroke-opacity=".2" stroke-width="2"/><path class="pulse" d="M80 122S36 96 36 61c0-19 24-28 44-7 20-21 44-12 44 7 0 35-44 61-44 61z" fill="url(#sva-b38e04812b8f-sva-aurora-favorite-bloom-g)"/><path d="M48 61c2-8 10-13 18-12" fill="none" stroke="#fff" stroke-opacity=".75" stroke-width="4" stroke-linecap="round"/><g class="spin" fill="#22D3EE"><circle cx="80" cy="22" r="4"/><circle cx="138" cy="80" r="4"/><circle cx="22" cy="80" r="4"/></g></svg>

Free UI Motion

Aurora Cart Add

Product drop and cart movement for add-to-cart feedback.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-823e631f237e-sva-aurora-cart-add" role="img" aria-labelledby="sva-823e631f237e-sva-aurora-cart-add-title sva-823e631f237e-sva-aurora-cart-add-desc"><title id="sva-823e631f237e-sva-aurora-cart-add-title">Aurora Cart Add</title><desc id="sva-823e631f237e-sva-aurora-cart-add-desc">Product drop and cart movement for add-to-cart feedback.</desc><defs><linearGradient id="sva-823e631f237e-sva-aurora-cart-add-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7C3AED"/><stop offset="1" stop-color="#22D3EE"/></linearGradient></defs><style>#sva-823e631f237e-sva-aurora-cart-add{overflow:visible;background:#07111f}#sva-823e631f237e-sva-aurora-cart-add .spin{transform-box:fill-box;transform-origin:center;animation:sva-823e631f237e-sva-aurora-cart-add-spin 5s linear infinite}#sva-823e631f237e-sva-aurora-cart-add .reverse{transform-box:fill-box;transform-origin:center;animation:sva-823e631f237e-sva-aurora-cart-add-reverse 4s linear infinite}#sva-823e631f237e-sva-aurora-cart-add .pulse{transform-box:fill-box;transform-origin:center;animation:sva-823e631f237e-sva-aurora-cart-add-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-823e631f237e-sva-aurora-cart-add .float{transform-box:fill-box;transform-origin:center;animation:sva-823e631f237e-sva-aurora-cart-add-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-823e631f237e-sva-aurora-cart-add .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-823e631f237e-sva-aurora-cart-add-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-823e631f237e-sva-aurora-cart-add .dash{animation:sva-823e631f237e-sva-aurora-cart-add-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-823e631f237e-sva-aurora-cart-add .pop{transform-box:fill-box;transform-origin:center;animation:sva-823e631f237e-sva-aurora-cart-add-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-823e631f237e-sva-aurora-cart-add .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-823e631f237e-sva-aurora-cart-add-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-823e631f237e-sva-aurora-cart-add .shake{transform-box:fill-box;transform-origin:center top;animation:sva-823e631f237e-sva-aurora-cart-add-shake 3s ease-in-out infinite}#sva-823e631f237e-sva-aurora-cart-add .slide{transform-box:fill-box;transform-origin:center;animation:sva-823e631f237e-sva-aurora-cart-add-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-823e631f237e-sva-aurora-cart-add .sweep{animation:sva-823e631f237e-sva-aurora-cart-add-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-823e631f237e-sva-aurora-cart-add .travel{animation:sva-823e631f237e-sva-aurora-cart-add-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-823e631f237e-sva-aurora-cart-add .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-823e631f237e-sva-aurora-cart-add-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-823e631f237e-sva-aurora-cart-add .d2{animation-delay:-.7s}#sva-823e631f237e-sva-aurora-cart-add .d3{animation-delay:-1.35s}@keyframes sva-823e631f237e-sva-aurora-cart-add-spin{to{transform:rotate(360deg)}}@keyframes sva-823e631f237e-sva-aurora-cart-add-reverse{to{transform:rotate(-360deg)}}@keyframes sva-823e631f237e-sva-aurora-cart-add-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-823e631f237e-sva-aurora-cart-add-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-823e631f237e-sva-aurora-cart-add-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-823e631f237e-sva-aurora-cart-add-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-823e631f237e-sva-aurora-cart-add-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-823e631f237e-sva-aurora-cart-add-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-823e631f237e-sva-aurora-cart-add-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-823e631f237e-sva-aurora-cart-add-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-823e631f237e-sva-aurora-cart-add-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-823e631f237e-sva-aurora-cart-add-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-823e631f237e-sva-aurora-cart-add-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-823e631f237e-sva-aurora-cart-add *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#7C3AED" stroke-opacity=".2" stroke-width="2"/><path d="M34 46h13l10 49h55l10-35H54" fill="#7C3AED" fill-opacity=".16" stroke="#F8FAFC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle class="pulse" cx="68" cy="112" r="8" fill="#22D3EE"/><circle class="pulse d2" cx="106" cy="112" r="8" fill="#22D3EE"/><g class="float"><rect x="72" y="30" width="28" height="28" rx="8" fill="url(#sva-823e631f237e-sva-aurora-cart-add-g)"/><path d="M79 44h14M86 37v14" stroke="#fff" stroke-width="4" stroke-linecap="round"/></g></svg>

Free UI Motion

Aurora Search Focus

Search icon focus response with a scanning highlight.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-8f14cf97ae8c-sva-aurora-search-focus" role="img" aria-labelledby="sva-8f14cf97ae8c-sva-aurora-search-focus-title sva-8f14cf97ae8c-sva-aurora-search-focus-desc"><title id="sva-8f14cf97ae8c-sva-aurora-search-focus-title">Aurora Search Focus</title><desc id="sva-8f14cf97ae8c-sva-aurora-search-focus-desc">Search icon focus response with a scanning highlight.</desc><defs><linearGradient id="sva-8f14cf97ae8c-sva-aurora-search-focus-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7C3AED"/><stop offset="1" stop-color="#22D3EE"/></linearGradient></defs><style>#sva-8f14cf97ae8c-sva-aurora-search-focus{overflow:visible;background:#07111f}#sva-8f14cf97ae8c-sva-aurora-search-focus .spin{transform-box:fill-box;transform-origin:center;animation:sva-8f14cf97ae8c-sva-aurora-search-focus-spin 5s linear infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .reverse{transform-box:fill-box;transform-origin:center;animation:sva-8f14cf97ae8c-sva-aurora-search-focus-reverse 4s linear infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .pulse{transform-box:fill-box;transform-origin:center;animation:sva-8f14cf97ae8c-sva-aurora-search-focus-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .float{transform-box:fill-box;transform-origin:center;animation:sva-8f14cf97ae8c-sva-aurora-search-focus-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-8f14cf97ae8c-sva-aurora-search-focus-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .dash{animation:sva-8f14cf97ae8c-sva-aurora-search-focus-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .pop{transform-box:fill-box;transform-origin:center;animation:sva-8f14cf97ae8c-sva-aurora-search-focus-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-8f14cf97ae8c-sva-aurora-search-focus-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .shake{transform-box:fill-box;transform-origin:center top;animation:sva-8f14cf97ae8c-sva-aurora-search-focus-shake 3s ease-in-out infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .slide{transform-box:fill-box;transform-origin:center;animation:sva-8f14cf97ae8c-sva-aurora-search-focus-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .sweep{animation:sva-8f14cf97ae8c-sva-aurora-search-focus-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .travel{animation:sva-8f14cf97ae8c-sva-aurora-search-focus-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-8f14cf97ae8c-sva-aurora-search-focus-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-8f14cf97ae8c-sva-aurora-search-focus .d2{animation-delay:-.7s}#sva-8f14cf97ae8c-sva-aurora-search-focus .d3{animation-delay:-1.35s}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-spin{to{transform:rotate(360deg)}}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-reverse{to{transform:rotate(-360deg)}}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-8f14cf97ae8c-sva-aurora-search-focus-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-8f14cf97ae8c-sva-aurora-search-focus *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#7C3AED" stroke-opacity=".2" stroke-width="2"/><circle class="pulse" cx="70" cy="70" r="32" fill="#7C3AED" fill-opacity=".12" stroke="url(#sva-8f14cf97ae8c-sva-aurora-search-focus-g)" stroke-width="5"/><path d="M94 94l29 29" stroke="#F8FAFC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path class="sweep" d="M47 70h46" stroke="#22D3EE" stroke-width="5" stroke-linecap="round"/><path class="draw" d="M58 54c9-7 23-6 31 2" fill="none" stroke="#F8FAFC" stroke-width="3"/></svg>

Free UI Motion

Aurora Notification Bell

Notification bell with soft ring waves and badge emphasis.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-9e4e519f589f-sva-aurora-notification-bell" role="img" aria-labelledby="sva-9e4e519f589f-sva-aurora-notification-bell-title sva-9e4e519f589f-sva-aurora-notification-bell-desc"><title id="sva-9e4e519f589f-sva-aurora-notification-bell-title">Aurora Notification Bell</title><desc id="sva-9e4e519f589f-sva-aurora-notification-bell-desc">Notification bell with soft ring waves and badge emphasis.</desc><defs><linearGradient id="sva-9e4e519f589f-sva-aurora-notification-bell-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7C3AED"/><stop offset="1" stop-color="#22D3EE"/></linearGradient></defs><style>#sva-9e4e519f589f-sva-aurora-notification-bell{overflow:visible;background:#07111f}#sva-9e4e519f589f-sva-aurora-notification-bell .spin{transform-box:fill-box;transform-origin:center;animation:sva-9e4e519f589f-sva-aurora-notification-bell-spin 5s linear infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .reverse{transform-box:fill-box;transform-origin:center;animation:sva-9e4e519f589f-sva-aurora-notification-bell-reverse 4s linear infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .pulse{transform-box:fill-box;transform-origin:center;animation:sva-9e4e519f589f-sva-aurora-notification-bell-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .float{transform-box:fill-box;transform-origin:center;animation:sva-9e4e519f589f-sva-aurora-notification-bell-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-9e4e519f589f-sva-aurora-notification-bell-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .dash{animation:sva-9e4e519f589f-sva-aurora-notification-bell-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .pop{transform-box:fill-box;transform-origin:center;animation:sva-9e4e519f589f-sva-aurora-notification-bell-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-9e4e519f589f-sva-aurora-notification-bell-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .shake{transform-box:fill-box;transform-origin:center top;animation:sva-9e4e519f589f-sva-aurora-notification-bell-shake 3s ease-in-out infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .slide{transform-box:fill-box;transform-origin:center;animation:sva-9e4e519f589f-sva-aurora-notification-bell-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .sweep{animation:sva-9e4e519f589f-sva-aurora-notification-bell-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .travel{animation:sva-9e4e519f589f-sva-aurora-notification-bell-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-9e4e519f589f-sva-aurora-notification-bell-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-9e4e519f589f-sva-aurora-notification-bell .d2{animation-delay:-.7s}#sva-9e4e519f589f-sva-aurora-notification-bell .d3{animation-delay:-1.35s}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-spin{to{transform:rotate(360deg)}}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-reverse{to{transform:rotate(-360deg)}}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-9e4e519f589f-sva-aurora-notification-bell-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-9e4e519f589f-sva-aurora-notification-bell *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#7C3AED" stroke-opacity=".2" stroke-width="2"/><g class="shake"><path d="M47 99h66c-9-9-12-18-12-31 0-14-9-25-21-28-12 3-21 14-21 28 0 13-3 22-12 31z" fill="#7C3AED" fill-opacity=".22" stroke="#F8FAFC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M70 110c3 9 17 9 20 0" fill="none" stroke="#F8FAFC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g><path class="draw" d="M118 56c7 7 7 20 0 27M130 47c12 13 12 32 0 45" fill="none" stroke="#22D3EE" stroke-width="4" stroke-linecap="round"/><circle class="pulse" cx="105" cy="48" r="8" fill="#22D3EE"/></svg>

Free UI Motion

Aurora Toggle Spark

Premium switch transition with a luminous active state.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-a6514d4e2169-sva-aurora-toggle-spark" role="img" aria-labelledby="sva-a6514d4e2169-sva-aurora-toggle-spark-title sva-a6514d4e2169-sva-aurora-toggle-spark-desc"><title id="sva-a6514d4e2169-sva-aurora-toggle-spark-title">Aurora Toggle Spark</title><desc id="sva-a6514d4e2169-sva-aurora-toggle-spark-desc">Premium switch transition with a luminous active state.</desc><defs><linearGradient id="sva-a6514d4e2169-sva-aurora-toggle-spark-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7C3AED"/><stop offset="1" stop-color="#22D3EE"/></linearGradient></defs><style>#sva-a6514d4e2169-sva-aurora-toggle-spark{overflow:visible;background:#07111f}#sva-a6514d4e2169-sva-aurora-toggle-spark .spin{transform-box:fill-box;transform-origin:center;animation:sva-a6514d4e2169-sva-aurora-toggle-spark-spin 5s linear infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .reverse{transform-box:fill-box;transform-origin:center;animation:sva-a6514d4e2169-sva-aurora-toggle-spark-reverse 4s linear infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .pulse{transform-box:fill-box;transform-origin:center;animation:sva-a6514d4e2169-sva-aurora-toggle-spark-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .float{transform-box:fill-box;transform-origin:center;animation:sva-a6514d4e2169-sva-aurora-toggle-spark-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-a6514d4e2169-sva-aurora-toggle-spark-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .dash{animation:sva-a6514d4e2169-sva-aurora-toggle-spark-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .pop{transform-box:fill-box;transform-origin:center;animation:sva-a6514d4e2169-sva-aurora-toggle-spark-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-a6514d4e2169-sva-aurora-toggle-spark-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .shake{transform-box:fill-box;transform-origin:center top;animation:sva-a6514d4e2169-sva-aurora-toggle-spark-shake 3s ease-in-out infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .slide{transform-box:fill-box;transform-origin:center;animation:sva-a6514d4e2169-sva-aurora-toggle-spark-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .sweep{animation:sva-a6514d4e2169-sva-aurora-toggle-spark-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .travel{animation:sva-a6514d4e2169-sva-aurora-toggle-spark-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-a6514d4e2169-sva-aurora-toggle-spark-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-a6514d4e2169-sva-aurora-toggle-spark .d2{animation-delay:-.7s}#sva-a6514d4e2169-sva-aurora-toggle-spark .d3{animation-delay:-1.35s}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-spin{to{transform:rotate(360deg)}}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-reverse{to{transform:rotate(-360deg)}}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-a6514d4e2169-sva-aurora-toggle-spark-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-a6514d4e2169-sva-aurora-toggle-spark *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#7C3AED" stroke-opacity=".2" stroke-width="2"/><rect x="31" y="58" width="98" height="48" rx="24" fill="#7C3AED" fill-opacity=".22" stroke="url(#sva-a6514d4e2169-sva-aurora-toggle-spark-g)" stroke-width="4"/><circle class="slide" cx="56" cy="82" r="17" fill="#F8FAFC"/><path class="pop" d="M118 39l3 8 8 3-8 3-3 8-3-8-8-3 8-3z" fill="#22D3EE"/><path d="M72 82h35" stroke="#22D3EE" stroke-width="4" stroke-linecap="round" opacity=".7"/></svg>

Free UI Motion

Aurora Download Complete

Download arrow, tray response, and completion spark.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-bc757d3033cc-sva-aurora-download-complete" role="img" aria-labelledby="sva-bc757d3033cc-sva-aurora-download-complete-title sva-bc757d3033cc-sva-aurora-download-complete-desc"><title id="sva-bc757d3033cc-sva-aurora-download-complete-title">Aurora Download Complete</title><desc id="sva-bc757d3033cc-sva-aurora-download-complete-desc">Download arrow, tray response, and completion spark.</desc><defs><linearGradient id="sva-bc757d3033cc-sva-aurora-download-complete-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7C3AED"/><stop offset="1" stop-color="#22D3EE"/></linearGradient></defs><style>#sva-bc757d3033cc-sva-aurora-download-complete{overflow:visible;background:#07111f}#sva-bc757d3033cc-sva-aurora-download-complete .spin{transform-box:fill-box;transform-origin:center;animation:sva-bc757d3033cc-sva-aurora-download-complete-spin 5s linear infinite}#sva-bc757d3033cc-sva-aurora-download-complete .reverse{transform-box:fill-box;transform-origin:center;animation:sva-bc757d3033cc-sva-aurora-download-complete-reverse 4s linear infinite}#sva-bc757d3033cc-sva-aurora-download-complete .pulse{transform-box:fill-box;transform-origin:center;animation:sva-bc757d3033cc-sva-aurora-download-complete-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-bc757d3033cc-sva-aurora-download-complete .float{transform-box:fill-box;transform-origin:center;animation:sva-bc757d3033cc-sva-aurora-download-complete-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-bc757d3033cc-sva-aurora-download-complete .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-bc757d3033cc-sva-aurora-download-complete-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-bc757d3033cc-sva-aurora-download-complete .dash{animation:sva-bc757d3033cc-sva-aurora-download-complete-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-bc757d3033cc-sva-aurora-download-complete .pop{transform-box:fill-box;transform-origin:center;animation:sva-bc757d3033cc-sva-aurora-download-complete-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-bc757d3033cc-sva-aurora-download-complete .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-bc757d3033cc-sva-aurora-download-complete-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-bc757d3033cc-sva-aurora-download-complete .shake{transform-box:fill-box;transform-origin:center top;animation:sva-bc757d3033cc-sva-aurora-download-complete-shake 3s ease-in-out infinite}#sva-bc757d3033cc-sva-aurora-download-complete .slide{transform-box:fill-box;transform-origin:center;animation:sva-bc757d3033cc-sva-aurora-download-complete-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-bc757d3033cc-sva-aurora-download-complete .sweep{animation:sva-bc757d3033cc-sva-aurora-download-complete-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-bc757d3033cc-sva-aurora-download-complete .travel{animation:sva-bc757d3033cc-sva-aurora-download-complete-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-bc757d3033cc-sva-aurora-download-complete .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-bc757d3033cc-sva-aurora-download-complete-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-bc757d3033cc-sva-aurora-download-complete .d2{animation-delay:-.7s}#sva-bc757d3033cc-sva-aurora-download-complete .d3{animation-delay:-1.35s}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-spin{to{transform:rotate(360deg)}}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-reverse{to{transform:rotate(-360deg)}}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-bc757d3033cc-sva-aurora-download-complete-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-bc757d3033cc-sva-aurora-download-complete *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#7C3AED" stroke-opacity=".2" stroke-width="2"/><rect x="35" y="97" width="90" height="24" rx="12" fill="#7C3AED" fill-opacity=".18" stroke="#7C3AED" stroke-width="3"/><g class="float"><path d="M80 35v52M59 68l21 21 21-21" fill="none" stroke="#F8FAFC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g><path class="draw" d="M47 109h66" fill="none" stroke="#22D3EE" stroke-width="5" stroke-linecap="round"/><path class="pop" d="M121 39l3 7 7 3-7 3-3 7-3-7-7-3 7-3z" fill="#22D3EE"/></svg>

Free UI Motion

Aurora Success Beacon

Success confirmation with a traced check and restrained celebration.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-fd1655f083e8-sva-aurora-success-beacon" role="img" aria-labelledby="sva-fd1655f083e8-sva-aurora-success-beacon-title sva-fd1655f083e8-sva-aurora-success-beacon-desc"><title id="sva-fd1655f083e8-sva-aurora-success-beacon-title">Aurora Success Beacon</title><desc id="sva-fd1655f083e8-sva-aurora-success-beacon-desc">Success confirmation with a traced check and restrained celebration.</desc><defs><linearGradient id="sva-fd1655f083e8-sva-aurora-success-beacon-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7C3AED"/><stop offset="1" stop-color="#22D3EE"/></linearGradient></defs><style>#sva-fd1655f083e8-sva-aurora-success-beacon{overflow:visible;background:#07111f}#sva-fd1655f083e8-sva-aurora-success-beacon .spin{transform-box:fill-box;transform-origin:center;animation:sva-fd1655f083e8-sva-aurora-success-beacon-spin 5s linear infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .reverse{transform-box:fill-box;transform-origin:center;animation:sva-fd1655f083e8-sva-aurora-success-beacon-reverse 4s linear infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .pulse{transform-box:fill-box;transform-origin:center;animation:sva-fd1655f083e8-sva-aurora-success-beacon-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .float{transform-box:fill-box;transform-origin:center;animation:sva-fd1655f083e8-sva-aurora-success-beacon-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-fd1655f083e8-sva-aurora-success-beacon-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .dash{animation:sva-fd1655f083e8-sva-aurora-success-beacon-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .pop{transform-box:fill-box;transform-origin:center;animation:sva-fd1655f083e8-sva-aurora-success-beacon-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-fd1655f083e8-sva-aurora-success-beacon-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .shake{transform-box:fill-box;transform-origin:center top;animation:sva-fd1655f083e8-sva-aurora-success-beacon-shake 3s ease-in-out infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .slide{transform-box:fill-box;transform-origin:center;animation:sva-fd1655f083e8-sva-aurora-success-beacon-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .sweep{animation:sva-fd1655f083e8-sva-aurora-success-beacon-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .travel{animation:sva-fd1655f083e8-sva-aurora-success-beacon-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-fd1655f083e8-sva-aurora-success-beacon-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-fd1655f083e8-sva-aurora-success-beacon .d2{animation-delay:-.7s}#sva-fd1655f083e8-sva-aurora-success-beacon .d3{animation-delay:-1.35s}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-spin{to{transform:rotate(360deg)}}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-reverse{to{transform:rotate(-360deg)}}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-fd1655f083e8-sva-aurora-success-beacon-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-fd1655f083e8-sva-aurora-success-beacon *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#7C3AED" stroke-opacity=".2" stroke-width="2"/><circle cx="80" cy="80" r="43" fill="none" stroke="#7C3AED" stroke-opacity=".22" stroke-width="10"/><circle class="spin dash" cx="80" cy="80" r="43" fill="none" stroke="url(#sva-fd1655f083e8-sva-aurora-success-beacon-g)" stroke-width="7" stroke-linecap="round" stroke-dasharray="205 70"/><path class="draw" d="M56 81l16 16 34-38" fill="none" stroke="#F8FAFC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><g class="pop" fill="#22D3EE"><circle cx="34" cy="52" r="4"/><circle cx="126" cy="52" r="3"/><path d="M125 106l4 8 8 4-8 4-4 8-4-8-8-4 8-4z"/></g></svg>

Bundles

5 bundles

Free 4 animations

Signal Social and Brand Pack

Eight expressive SVG moments for social products, communities, and brand surfaces.

View bundle Download

Free 8 animations

Momentum Analytics Motion Kit

Eight refined animated data visuals for dashboards, reports, and product metrics.

View bundle Download

Free 8 animations

Launch Hero Motion Scenes

Eight cinematic SVG hero scenes for launches, products, and storytelling sections.

View bundle Download

Free 8 animations

Orbit Premium Loader System

Eight distinctive, production-ready loaders with a shared premium motion language.

View bundle Download

Free 8 animations

Aurora UI Feedback Kit

Eight polished interface feedback animations for product teams and modern web apps.

View bundle Download