SVG Store animation

Revenue Bar Rise

Four premium bars rise with staggered grid alignment.

Free Data Visualization Free commercial license — unlimited personal and commercial use; attribution not required
Download
Revenue Bar RiseFour premium bars rise with staggered grid alignment.
Details

About this animation

Part of the Momentum Analytics Motion Kit. Four premium bars rise with staggered grid alignment. Built as a standalone inline SVG with scoped CSS animations, accessible title and description, no scripts or external resources, and a static prefers-reduced-motion fallback. Easy to recolor and ready for product use.

SVG code
<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>