SVG Store bundle

Aurora UI Feedback Kit

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

Free 8 animations Free commercial license — unlimited personal and commercial use; attribution not required

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Aurora UI Feedback Kit</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>body{font-family:system-ui,sans-serif;margin:2rem;background:#f8fafc;color:#0f172a}section{margin:0 0 2rem;padding:1.5rem;border:1px solid #e2e8f0;background:#fff}svg{max-width:100%;height:auto}</style>
</head>
<body>
<h1>Aurora UI Feedback Kit</h1>
<p>Eight polished interface feedback animations for product teams and modern web apps.</p>
<section data-animation="aurora-cart-add">
<h2>Aurora Cart Add</h2>
<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>
</section>
<section data-animation="aurora-search-focus">
<h2>Aurora Search Focus</h2>
<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>
</section>
<section data-animation="aurora-notification-bell">
<h2>Aurora Notification Bell</h2>
<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>
</section>
<section data-animation="aurora-toggle-spark">
<h2>Aurora Toggle Spark</h2>
<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>
</section>
<section data-animation="aurora-favorite-bloom">
<h2>Aurora Favorite Bloom</h2>
<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>
</section>
<section data-animation="aurora-download-complete">
<h2>Aurora Download Complete</h2>
<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>
</section>
<section data-animation="aurora-secure-lock">
<h2>Aurora Secure Lock</h2>
<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>
</section>
<section data-animation="aurora-success-beacon">
<h2>Aurora Success Beacon</h2>
<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>
</section>
</body>
</html>

Download

Included assets

Success confirmation with a traced check and restrained celebration.

Download