SVG Store bundle

Launch Hero Motion Scenes

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

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>Launch Hero Motion Scenes</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>Launch Hero Motion Scenes</h1>
<p>Eight cinematic SVG hero scenes for launches, products, and storytelling sections.</p>
<section data-animation="hero-spotlight-sweep">
<h2>Hero Spotlight Sweep</h2>
<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>
</section>
<section data-animation="network-bloom-scene">
<h2>Network Bloom Scene</h2>
<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>
</section>
<section data-animation="rocket-arc-launch">
<h2>Rocket Arc Launch</h2>
<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>
</section>
<section data-animation="product-orbit-showcase">
<h2>Product Orbit Showcase</h2>
<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>
</section>
<section data-animation="wordmark-line-reveal">
<h2>Wordmark Line Reveal</h2>
<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>
</section>
<section data-animation="interactive-cursor-demo">
<h2>Interactive Cursor Demo</h2>
<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>
</section>
<section data-animation="global-reach-pulse">
<h2>Global Reach Pulse</h2>
<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>
</section>
<section data-animation="data-stream-portal">
<h2>Data Stream Portal</h2>
<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>
</section>
</body>
</html>

Download

Included assets

Data packets travel through a layered product portal.

Download