SVG Store bundle

Momentum Analytics Motion Kit

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

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>Momentum Analytics Motion 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>Momentum Analytics Motion Kit</h1>
<p>Eight refined animated data visuals for dashboards, reports, and product metrics.</p>
<section data-animation="segment-donut-sweep">
<h2>Segment Donut Sweep</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-2e510a0ff632-sva-segment-donut-sweep" role="img" aria-labelledby="sva-2e510a0ff632-sva-segment-donut-sweep-title sva-2e510a0ff632-sva-segment-donut-sweep-desc"><title id="sva-2e510a0ff632-sva-segment-donut-sweep-title">Segment Donut Sweep</title><desc id="sva-2e510a0ff632-sva-segment-donut-sweep-desc">Layered donut segments animate into a balanced composition.</desc><defs><linearGradient id="sva-2e510a0ff632-sva-segment-donut-sweep-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-2e510a0ff632-sva-segment-donut-sweep{overflow:visible;background:#07111f}#sva-2e510a0ff632-sva-segment-donut-sweep .spin{transform-box:fill-box;transform-origin:center;animation:sva-2e510a0ff632-sva-segment-donut-sweep-spin 5s linear infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .reverse{transform-box:fill-box;transform-origin:center;animation:sva-2e510a0ff632-sva-segment-donut-sweep-reverse 4s linear infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .pulse{transform-box:fill-box;transform-origin:center;animation:sva-2e510a0ff632-sva-segment-donut-sweep-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .float{transform-box:fill-box;transform-origin:center;animation:sva-2e510a0ff632-sva-segment-donut-sweep-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-2e510a0ff632-sva-segment-donut-sweep-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .dash{animation:sva-2e510a0ff632-sva-segment-donut-sweep-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .pop{transform-box:fill-box;transform-origin:center;animation:sva-2e510a0ff632-sva-segment-donut-sweep-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-2e510a0ff632-sva-segment-donut-sweep-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .shake{transform-box:fill-box;transform-origin:center top;animation:sva-2e510a0ff632-sva-segment-donut-sweep-shake 3s ease-in-out infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .slide{transform-box:fill-box;transform-origin:center;animation:sva-2e510a0ff632-sva-segment-donut-sweep-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .sweep{animation:sva-2e510a0ff632-sva-segment-donut-sweep-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .travel{animation:sva-2e510a0ff632-sva-segment-donut-sweep-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-2e510a0ff632-sva-segment-donut-sweep-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-2e510a0ff632-sva-segment-donut-sweep .d2{animation-delay:-.7s}#sva-2e510a0ff632-sva-segment-donut-sweep .d3{animation-delay:-1.35s}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-spin{to{transform:rotate(360deg)}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-reverse{to{transform:rotate(-360deg)}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-2e510a0ff632-sva-segment-donut-sweep-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-2e510a0ff632-sva-segment-donut-sweep *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><circle cx="80" cy="80" r="46" fill="none" stroke="#10B981" stroke-opacity=".14" stroke-width="17"/><circle class="dash" cx="80" cy="80" r="46" fill="none" stroke="#10B981" stroke-width="17" stroke-dasharray="132 289" transform="rotate(-90 80 80)"/><circle class="dash d2" cx="80" cy="80" r="46" fill="none" stroke="#38BDF8" stroke-width="17" stroke-dasharray="74 289" stroke-dashoffset="-144" transform="rotate(-90 80 80)"/><circle cx="80" cy="80" r="18" fill="#ECFDF5" fill-opacity=".1"/></svg>
</section>
<section data-animation="growth-trend-lift">
<h2>Growth Trend Lift</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-3af93197a977-sva-growth-trend-lift" role="img" aria-labelledby="sva-3af93197a977-sva-growth-trend-lift-title sva-3af93197a977-sva-growth-trend-lift-desc"><title id="sva-3af93197a977-sva-growth-trend-lift-title">Growth Trend Lift</title><desc id="sva-3af93197a977-sva-growth-trend-lift-desc">A confident trend arrow rises across an animated grid.</desc><defs><linearGradient id="sva-3af93197a977-sva-growth-trend-lift-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-3af93197a977-sva-growth-trend-lift{overflow:visible;background:#07111f}#sva-3af93197a977-sva-growth-trend-lift .spin{transform-box:fill-box;transform-origin:center;animation:sva-3af93197a977-sva-growth-trend-lift-spin 5s linear infinite}#sva-3af93197a977-sva-growth-trend-lift .reverse{transform-box:fill-box;transform-origin:center;animation:sva-3af93197a977-sva-growth-trend-lift-reverse 4s linear infinite}#sva-3af93197a977-sva-growth-trend-lift .pulse{transform-box:fill-box;transform-origin:center;animation:sva-3af93197a977-sva-growth-trend-lift-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .float{transform-box:fill-box;transform-origin:center;animation:sva-3af93197a977-sva-growth-trend-lift-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-3af93197a977-sva-growth-trend-lift-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .dash{animation:sva-3af93197a977-sva-growth-trend-lift-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .pop{transform-box:fill-box;transform-origin:center;animation:sva-3af93197a977-sva-growth-trend-lift-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-3af93197a977-sva-growth-trend-lift .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-3af93197a977-sva-growth-trend-lift-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .shake{transform-box:fill-box;transform-origin:center top;animation:sva-3af93197a977-sva-growth-trend-lift-shake 3s ease-in-out infinite}#sva-3af93197a977-sva-growth-trend-lift .slide{transform-box:fill-box;transform-origin:center;animation:sva-3af93197a977-sva-growth-trend-lift-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .sweep{animation:sva-3af93197a977-sva-growth-trend-lift-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .travel{animation:sva-3af93197a977-sva-growth-trend-lift-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-3af93197a977-sva-growth-trend-lift-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-3af93197a977-sva-growth-trend-lift .d2{animation-delay:-.7s}#sva-3af93197a977-sva-growth-trend-lift .d3{animation-delay:-1.35s}@keyframes sva-3af93197a977-sva-growth-trend-lift-spin{to{transform:rotate(360deg)}}@keyframes sva-3af93197a977-sva-growth-trend-lift-reverse{to{transform:rotate(-360deg)}}@keyframes sva-3af93197a977-sva-growth-trend-lift-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-3af93197a977-sva-growth-trend-lift-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-3af93197a977-sva-growth-trend-lift-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-3af93197a977-sva-growth-trend-lift-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-3af93197a977-sva-growth-trend-lift-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-3af93197a977-sva-growth-trend-lift-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-3af93197a977-sva-growth-trend-lift-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-3af93197a977-sva-growth-trend-lift-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-3af93197a977-sva-growth-trend-lift-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-3af93197a977-sva-growth-trend-lift-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-3af93197a977-sva-growth-trend-lift-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-3af93197a977-sva-growth-trend-lift *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><path d="M30 124h102M30 94h102M30 64h102M30 34h102" stroke="#10B981" stroke-opacity=".14" stroke-width="2"/><path class="draw" d="M34 111l27-25 22 9 39-48" fill="none" stroke="url(#sva-3af93197a977-sva-growth-trend-lift-g)" stroke-width="7"/><path class="pop" d="M105 45h21v21" fill="none" stroke="#38BDF8" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</section>
<section data-animation="sparkline-trace-up">
<h2>Sparkline Trace Up</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-4099df1e0bfa-sva-sparkline-trace-up" role="img" aria-labelledby="sva-4099df1e0bfa-sva-sparkline-trace-up-title sva-4099df1e0bfa-sva-sparkline-trace-up-desc"><title id="sva-4099df1e0bfa-sva-sparkline-trace-up-title">Sparkline Trace Up</title><desc id="sva-4099df1e0bfa-sva-sparkline-trace-up-desc">An upward sparkline draws across a quiet analytical grid.</desc><defs><linearGradient id="sva-4099df1e0bfa-sva-sparkline-trace-up-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-4099df1e0bfa-sva-sparkline-trace-up{overflow:visible;background:#07111f}#sva-4099df1e0bfa-sva-sparkline-trace-up .spin{transform-box:fill-box;transform-origin:center;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-spin 5s linear infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .reverse{transform-box:fill-box;transform-origin:center;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-reverse 4s linear infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .pulse{transform-box:fill-box;transform-origin:center;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .float{transform-box:fill-box;transform-origin:center;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .dash{animation:sva-4099df1e0bfa-sva-sparkline-trace-up-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .pop{transform-box:fill-box;transform-origin:center;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .shake{transform-box:fill-box;transform-origin:center top;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-shake 3s ease-in-out infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .slide{transform-box:fill-box;transform-origin:center;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .sweep{animation:sva-4099df1e0bfa-sva-sparkline-trace-up-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .travel{animation:sva-4099df1e0bfa-sva-sparkline-trace-up-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-4099df1e0bfa-sva-sparkline-trace-up-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-4099df1e0bfa-sva-sparkline-trace-up .d2{animation-delay:-.7s}#sva-4099df1e0bfa-sva-sparkline-trace-up .d3{animation-delay:-1.35s}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-spin{to{transform:rotate(360deg)}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-reverse{to{transform:rotate(-360deg)}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-4099df1e0bfa-sva-sparkline-trace-up-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-4099df1e0bfa-sva-sparkline-trace-up *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><path d="M25 119h110M25 89h110M25 59h110" stroke="#10B981" stroke-opacity=".16" stroke-width="2"/><path class="draw" d="M28 109l19-18 18 7 21-35 20 11 26-39" fill="none" stroke="url(#sva-4099df1e0bfa-sva-sparkline-trace-up-g)" stroke-width="7"/><circle class="pulse" cx="132" cy="35" r="7" fill="#38BDF8"/></svg>
</section>
<section data-animation="funnel-flow-stages">
<h2>Funnel Flow Stages</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-754df82c93a8-sva-funnel-flow-stages" role="img" aria-labelledby="sva-754df82c93a8-sva-funnel-flow-stages-title sva-754df82c93a8-sva-funnel-flow-stages-desc"><title id="sva-754df82c93a8-sva-funnel-flow-stages-title">Funnel Flow Stages</title><desc id="sva-754df82c93a8-sva-funnel-flow-stages-desc">Conversion stages reveal from wide acquisition to result.</desc><defs><linearGradient id="sva-754df82c93a8-sva-funnel-flow-stages-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-754df82c93a8-sva-funnel-flow-stages{overflow:visible;background:#07111f}#sva-754df82c93a8-sva-funnel-flow-stages .spin{transform-box:fill-box;transform-origin:center;animation:sva-754df82c93a8-sva-funnel-flow-stages-spin 5s linear infinite}#sva-754df82c93a8-sva-funnel-flow-stages .reverse{transform-box:fill-box;transform-origin:center;animation:sva-754df82c93a8-sva-funnel-flow-stages-reverse 4s linear infinite}#sva-754df82c93a8-sva-funnel-flow-stages .pulse{transform-box:fill-box;transform-origin:center;animation:sva-754df82c93a8-sva-funnel-flow-stages-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .float{transform-box:fill-box;transform-origin:center;animation:sva-754df82c93a8-sva-funnel-flow-stages-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-754df82c93a8-sva-funnel-flow-stages-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .dash{animation:sva-754df82c93a8-sva-funnel-flow-stages-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .pop{transform-box:fill-box;transform-origin:center;animation:sva-754df82c93a8-sva-funnel-flow-stages-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-754df82c93a8-sva-funnel-flow-stages-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .shake{transform-box:fill-box;transform-origin:center top;animation:sva-754df82c93a8-sva-funnel-flow-stages-shake 3s ease-in-out infinite}#sva-754df82c93a8-sva-funnel-flow-stages .slide{transform-box:fill-box;transform-origin:center;animation:sva-754df82c93a8-sva-funnel-flow-stages-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .sweep{animation:sva-754df82c93a8-sva-funnel-flow-stages-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .travel{animation:sva-754df82c93a8-sva-funnel-flow-stages-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-754df82c93a8-sva-funnel-flow-stages-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-754df82c93a8-sva-funnel-flow-stages .d2{animation-delay:-.7s}#sva-754df82c93a8-sva-funnel-flow-stages .d3{animation-delay:-1.35s}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-spin{to{transform:rotate(360deg)}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-reverse{to{transform:rotate(-360deg)}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-754df82c93a8-sva-funnel-flow-stages-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-754df82c93a8-sva-funnel-flow-stages *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><g fill="url(#sva-754df82c93a8-sva-funnel-flow-stages-g)"><path class="pop" d="M29 35h102l-13 22H42z"/><path class="pop d2" d="M45 65h70l-13 22H58z" opacity=".82"/><path class="pop d3" d="M61 95h38l-11 25H72z" opacity=".68"/></g><circle class="pulse" cx="80" cy="132" r="7" fill="#38BDF8"/></svg>
</section>
<section data-animation="performance-gauge-settle">
<h2>Performance Gauge Settle</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-7a96104c6404-sva-performance-gauge-settle" role="img" aria-labelledby="sva-7a96104c6404-sva-performance-gauge-settle-title sva-7a96104c6404-sva-performance-gauge-settle-desc"><title id="sva-7a96104c6404-sva-performance-gauge-settle-title">Performance Gauge Settle</title><desc id="sva-7a96104c6404-sva-performance-gauge-settle-desc">A gauge arc resolves as the needle settles into range.</desc><defs><linearGradient id="sva-7a96104c6404-sva-performance-gauge-settle-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-7a96104c6404-sva-performance-gauge-settle{overflow:visible;background:#07111f}#sva-7a96104c6404-sva-performance-gauge-settle .spin{transform-box:fill-box;transform-origin:center;animation:sva-7a96104c6404-sva-performance-gauge-settle-spin 5s linear infinite}#sva-7a96104c6404-sva-performance-gauge-settle .reverse{transform-box:fill-box;transform-origin:center;animation:sva-7a96104c6404-sva-performance-gauge-settle-reverse 4s linear infinite}#sva-7a96104c6404-sva-performance-gauge-settle .pulse{transform-box:fill-box;transform-origin:center;animation:sva-7a96104c6404-sva-performance-gauge-settle-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .float{transform-box:fill-box;transform-origin:center;animation:sva-7a96104c6404-sva-performance-gauge-settle-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-7a96104c6404-sva-performance-gauge-settle-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .dash{animation:sva-7a96104c6404-sva-performance-gauge-settle-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .pop{transform-box:fill-box;transform-origin:center;animation:sva-7a96104c6404-sva-performance-gauge-settle-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-7a96104c6404-sva-performance-gauge-settle-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .shake{transform-box:fill-box;transform-origin:center top;animation:sva-7a96104c6404-sva-performance-gauge-settle-shake 3s ease-in-out infinite}#sva-7a96104c6404-sva-performance-gauge-settle .slide{transform-box:fill-box;transform-origin:center;animation:sva-7a96104c6404-sva-performance-gauge-settle-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .sweep{animation:sva-7a96104c6404-sva-performance-gauge-settle-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .travel{animation:sva-7a96104c6404-sva-performance-gauge-settle-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-7a96104c6404-sva-performance-gauge-settle-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-7a96104c6404-sva-performance-gauge-settle .d2{animation-delay:-.7s}#sva-7a96104c6404-sva-performance-gauge-settle .d3{animation-delay:-1.35s}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-spin{to{transform:rotate(360deg)}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-reverse{to{transform:rotate(-360deg)}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-7a96104c6404-sva-performance-gauge-settle-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-7a96104c6404-sva-performance-gauge-settle *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><path d="M30 105a54 54 0 01100 0" fill="none" stroke="#10B981" stroke-opacity=".18" stroke-width="14" stroke-linecap="round"/><path class="dash" d="M30 105a54 54 0 0178-47" fill="none" stroke="url(#sva-7a96104c6404-sva-performance-gauge-settle-g)" stroke-width="14" stroke-linecap="round"/><g class="tilt"><path d="M80 101l35-28" stroke="#ECFDF5" stroke-width="5" stroke-linecap="round"/><circle cx="80" cy="101" r="10" fill="#38BDF8"/></g></svg>
</section>
<section data-animation="revenue-bar-rise">
<h2>Revenue Bar Rise</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-7ecac519a1d6-sva-revenue-bar-rise" role="img" aria-labelledby="sva-7ecac519a1d6-sva-revenue-bar-rise-title sva-7ecac519a1d6-sva-revenue-bar-rise-desc"><title id="sva-7ecac519a1d6-sva-revenue-bar-rise-title">Revenue Bar Rise</title><desc id="sva-7ecac519a1d6-sva-revenue-bar-rise-desc">Four premium bars rise with staggered grid alignment.</desc><defs><linearGradient id="sva-7ecac519a1d6-sva-revenue-bar-rise-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-7ecac519a1d6-sva-revenue-bar-rise{overflow:visible;background:#07111f}#sva-7ecac519a1d6-sva-revenue-bar-rise .spin{transform-box:fill-box;transform-origin:center;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-spin 5s linear infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .reverse{transform-box:fill-box;transform-origin:center;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-reverse 4s linear infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .pulse{transform-box:fill-box;transform-origin:center;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .float{transform-box:fill-box;transform-origin:center;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .dash{animation:sva-7ecac519a1d6-sva-revenue-bar-rise-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .pop{transform-box:fill-box;transform-origin:center;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .shake{transform-box:fill-box;transform-origin:center top;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-shake 3s ease-in-out infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .slide{transform-box:fill-box;transform-origin:center;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .sweep{animation:sva-7ecac519a1d6-sva-revenue-bar-rise-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .travel{animation:sva-7ecac519a1d6-sva-revenue-bar-rise-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-7ecac519a1d6-sva-revenue-bar-rise-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-7ecac519a1d6-sva-revenue-bar-rise .d2{animation-delay:-.7s}#sva-7ecac519a1d6-sva-revenue-bar-rise .d3{animation-delay:-1.35s}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-spin{to{transform:rotate(360deg)}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-reverse{to{transform:rotate(-360deg)}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-7ecac519a1d6-sva-revenue-bar-rise-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-7ecac519a1d6-sva-revenue-bar-rise *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><path d="M28 124h108M28 95h108M28 66h108M28 37h108" stroke="#10B981" stroke-opacity=".15" stroke-width="2"/><g fill="url(#sva-7ecac519a1d6-sva-revenue-bar-rise-g)"><rect class="rise" x="38" y="83" width="18" height="41" rx="6"/><rect class="rise d2" x="65" y="61" width="18" height="63" rx="6"/><rect class="rise d3" x="92" y="42" width="18" height="82" rx="6"/><rect class="rise" x="119" y="71" width="10" height="53" rx="5"/></g></svg>
</section>
<section data-animation="heatmap-insight-pulse">
<h2>Heatmap Insight Pulse</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-90ea29971c76-sva-heatmap-insight-pulse" role="img" aria-labelledby="sva-90ea29971c76-sva-heatmap-insight-pulse-title sva-90ea29971c76-sva-heatmap-insight-pulse-desc"><title id="sva-90ea29971c76-sva-heatmap-insight-pulse-title">Heatmap Insight Pulse</title><desc id="sva-90ea29971c76-sva-heatmap-insight-pulse-desc">A compact heatmap highlights shifting areas of interest.</desc><defs><linearGradient id="sva-90ea29971c76-sva-heatmap-insight-pulse-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-90ea29971c76-sva-heatmap-insight-pulse{overflow:visible;background:#07111f}#sva-90ea29971c76-sva-heatmap-insight-pulse .spin{transform-box:fill-box;transform-origin:center;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-spin 5s linear infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .reverse{transform-box:fill-box;transform-origin:center;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-reverse 4s linear infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .pulse{transform-box:fill-box;transform-origin:center;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .float{transform-box:fill-box;transform-origin:center;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .dash{animation:sva-90ea29971c76-sva-heatmap-insight-pulse-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .pop{transform-box:fill-box;transform-origin:center;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .shake{transform-box:fill-box;transform-origin:center top;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-shake 3s ease-in-out infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .slide{transform-box:fill-box;transform-origin:center;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .sweep{animation:sva-90ea29971c76-sva-heatmap-insight-pulse-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .travel{animation:sva-90ea29971c76-sva-heatmap-insight-pulse-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-90ea29971c76-sva-heatmap-insight-pulse-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-90ea29971c76-sva-heatmap-insight-pulse .d2{animation-delay:-.7s}#sva-90ea29971c76-sva-heatmap-insight-pulse .d3{animation-delay:-1.35s}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-spin{to{transform:rotate(360deg)}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-reverse{to{transform:rotate(-360deg)}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-90ea29971c76-sva-heatmap-insight-pulse-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-90ea29971c76-sva-heatmap-insight-pulse *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><g><rect class="pulse" x="39" y="39" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.28"/><rect class="pulse d2" x="61" y="39" width="16" height="16" rx="5" fill="#10B981" opacity="0.42"/><rect class="pulse d3" x="83" y="39" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.56"/><rect class="pulse" x="105" y="39" width="16" height="16" rx="5" fill="#10B981" opacity="0.70"/><rect class="pulse d2" x="39" y="61" width="16" height="16" rx="5" fill="#10B981" opacity="0.84"/><rect class="pulse d3" x="61" y="61" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.28"/><rect class="pulse" x="83" y="61" width="16" height="16" rx="5" fill="#10B981" opacity="0.42"/><rect class="pulse d2" x="105" y="61" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.56"/><rect class="pulse d3" x="39" y="83" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.70"/><rect class="pulse" x="61" y="83" width="16" height="16" rx="5" fill="#10B981" opacity="0.84"/><rect class="pulse d2" x="83" y="83" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.28"/><rect class="pulse d3" x="105" y="83" width="16" height="16" rx="5" fill="#10B981" opacity="0.42"/><rect class="pulse" x="39" y="105" width="16" height="16" rx="5" fill="#10B981" opacity="0.56"/><rect class="pulse d2" x="61" y="105" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.70"/><rect class="pulse d3" x="83" y="105" width="16" height="16" rx="5" fill="#10B981" opacity="0.84"/><rect class="pulse" x="105" y="105" width="16" height="16" rx="5" fill="#38BDF8" opacity="0.28"/></g></svg>
</section>
<section data-animation="kpi-confidence-ring">
<h2>KPI Confidence Ring</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-a74b93497797-sva-kpi-confidence-ring" role="img" aria-labelledby="sva-a74b93497797-sva-kpi-confidence-ring-title sva-a74b93497797-sva-kpi-confidence-ring-desc"><title id="sva-a74b93497797-sva-kpi-confidence-ring-title">KPI Confidence Ring</title><desc id="sva-a74b93497797-sva-kpi-confidence-ring-desc">A metric ring resolves around a crisp seventy-two percent KPI.</desc><defs><linearGradient id="sva-a74b93497797-sva-kpi-confidence-ring-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#10B981"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs><style>#sva-a74b93497797-sva-kpi-confidence-ring{overflow:visible;background:#07111f}#sva-a74b93497797-sva-kpi-confidence-ring .spin{transform-box:fill-box;transform-origin:center;animation:sva-a74b93497797-sva-kpi-confidence-ring-spin 5s linear infinite}#sva-a74b93497797-sva-kpi-confidence-ring .reverse{transform-box:fill-box;transform-origin:center;animation:sva-a74b93497797-sva-kpi-confidence-ring-reverse 4s linear infinite}#sva-a74b93497797-sva-kpi-confidence-ring .pulse{transform-box:fill-box;transform-origin:center;animation:sva-a74b93497797-sva-kpi-confidence-ring-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .float{transform-box:fill-box;transform-origin:center;animation:sva-a74b93497797-sva-kpi-confidence-ring-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-a74b93497797-sva-kpi-confidence-ring-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .dash{animation:sva-a74b93497797-sva-kpi-confidence-ring-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .pop{transform-box:fill-box;transform-origin:center;animation:sva-a74b93497797-sva-kpi-confidence-ring-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-a74b93497797-sva-kpi-confidence-ring-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .shake{transform-box:fill-box;transform-origin:center top;animation:sva-a74b93497797-sva-kpi-confidence-ring-shake 3s ease-in-out infinite}#sva-a74b93497797-sva-kpi-confidence-ring .slide{transform-box:fill-box;transform-origin:center;animation:sva-a74b93497797-sva-kpi-confidence-ring-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .sweep{animation:sva-a74b93497797-sva-kpi-confidence-ring-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .travel{animation:sva-a74b93497797-sva-kpi-confidence-ring-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-a74b93497797-sva-kpi-confidence-ring-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-a74b93497797-sva-kpi-confidence-ring .d2{animation-delay:-.7s}#sva-a74b93497797-sva-kpi-confidence-ring .d3{animation-delay:-1.35s}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-spin{to{transform:rotate(360deg)}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-reverse{to{transform:rotate(-360deg)}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-a74b93497797-sva-kpi-confidence-ring-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-a74b93497797-sva-kpi-confidence-ring *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#10B981" stroke-opacity=".2" stroke-width="2"/><circle cx="80" cy="80" r="48" fill="none" stroke="#10B981" stroke-opacity=".18" stroke-width="10"/><circle class="dash" cx="80" cy="80" r="48" fill="none" stroke="url(#sva-a74b93497797-sva-kpi-confidence-ring-g)" stroke-width="10" stroke-linecap="round" stroke-dasharray="217 302" transform="rotate(-90 80 80)"/><text x="80" y="88" fill="#ECFDF5" font-size="27" font-weight="700" text-anchor="middle" font-family="system-ui,sans-serif">72%</text></svg>
</section>
</body>
</html>

Download

Included assets

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

Download