Turn empty analytics states into a polished sense of progress with pulsing KPIs and flowing trend lines.
A premium empty-state animation that makes dashboards feel active, credible, and ready to grow. Pulsing KPI cards, rising data lines, and confidence markers help onboarding, hero sections, and analytics surfaces communicate momentum instantly. Lightweight and elegant, it adds motion without distracting from the product story.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 480" role="img" aria-label="Premium dashboard empty state animation with pulsing KPI cards and rising trend lines" width="720" height="480">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#0f172a"/>
<stop offset="55%" stop-color="#111c44"/>
<stop offset="100%" stop-color="#0a1026"/>
</linearGradient>
<linearGradient id="panel" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#1a2550"/>
<stop offset="100%" stop-color="#111a3b"/>
</linearGradient>
<linearGradient id="card" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#24356d"/>
<stop offset="100%" stop-color="#18264f"/>
</linearGradient>
<linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#56e0d0"/>
<stop offset="60%" stop-color="#6ea8ff"/>
<stop offset="100%" stop-color="#f7b267"/>
</linearGradient>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="10" stdDeviation="14" flood-color="#000000" flood-opacity="0.28"/>
</filter>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="b"/>
<feColorMatrix in="b" type="matrix" values="1 0 0 0 0.2 0 1 0 0 0.8 0 0 1 0 0.75 0 0 0 0.9 0"/>
</filter>
<clipPath id="chartClip"><rect x="252" y="148" width="388" height="198" rx="22"/></clipPath>
<style>
<![CDATA[
.cardPulse { transform-box: fill-box; transform-origin: center; animation: cardPulse 4s ease-in-out infinite; }
.cardPulse2 { animation-delay: .55s; }
.cardPulse3 { animation-delay: 1.1s; }
.trendDraw { stroke-dasharray: 520; stroke-dashoffset: 520; animation: drawLine 4s ease-in-out infinite; }
.trendGlow { animation: glowPulse 4s ease-in-out infinite; }
.dotFloat { animation: floatDot 4s ease-in-out infinite; }
.dotFloat2 { animation-delay: .7s; }
.dotFloat3 { animation-delay: 1.4s; }
.scan { animation: scanMove 4s linear infinite; }
@keyframes cardPulse {
0%, 100% { transform: translateY(0px) scale(1); opacity: .92; }
35% { transform: translateY(-2px) scale(1.02); opacity: 1; }
60% { transform: translateY(0px) scale(.995); opacity: .95; }
}
@keyframes drawLine {
0% { stroke-dashoffset: 520; opacity: .25; }
22% { opacity: 1; }
55% { stroke-dashoffset: 0; opacity: 1; }
80% { stroke-dashoffset: 0; opacity: .9; }
100% { stroke-dashoffset: 0; opacity: .28; }
}
@keyframes glowPulse {
0%, 100% { opacity: .35; }
40% { opacity: 1; }
70% { opacity: .6; }
}
@keyframes floatDot {
0%, 100% { transform: translateY(0px); opacity: .7; }
40% { transform: translateY(-6px); opacity: 1; }
75% { transform: translateY(-2px); opacity: .82; }
}
@keyframes scanMove {
0% { transform: translateY(-44px); opacity: 0; }
12% { opacity: .55; }
50% { opacity: .25; }
100% { transform: translateY(264px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.cardPulse, .trendDraw, .trendGlow, .dotFloat, .scan { animation: none !important; }
}
]]>
</style>
</defs>
<rect width="720" height="480" fill="url(#bg)"/>
<circle cx="120" cy="110" r="92" fill="#4f46e5" opacity="0.12"/>
<circle cx="612" cy="92" r="120" fill="#14b8a6" opacity="0.10"/>
<circle cx="606" cy="390" r="150" fill="#f59e0b" opacity="0.08"/>
<g filter="url(#softShadow)">
<rect x="66" y="60" width="588" height="360" rx="28" fill="url(#panel)" stroke="#2b3a73" stroke-opacity="0.85"/>
<rect x="86" y="82" width="548" height="42" rx="14" fill="#0c1430" opacity="0.8"/>
<circle cx="112" cy="103" r="8" fill="#56e0d0"/>
<circle cx="136" cy="103" r="8" fill="#6ea8ff"/>
<circle cx="160" cy="103" r="8" fill="#f7b267"/>
<rect x="520" y="92" width="92" height="22" rx="11" fill="#22366e"/>
<rect x="530" y="99" width="42" height="8" rx="4" fill="#9fb2ff" opacity="0.7"/>
</g>
<g class="cardPulse" filter="url(#softShadow)">
<rect x="96" y="150" width="126" height="92" rx="20" fill="url(#card)" stroke="#38509b" stroke-opacity="0.7"/>
<rect x="114" y="170" width="44" height="10" rx="5" fill="#9eb1ff" opacity="0.9"/>
<rect x="114" y="192" width="70" height="20" rx="8" fill="#edf2ff" opacity="0.98"/>
<circle cx="196" cy="202" r="18" fill="#56e0d0" opacity="0.18"/>
<path d="M189 202h8l5-7 4 11 4-8h7" fill="none" stroke="#56e0d0" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g class="cardPulse cardPulse2" filter="url(#softShadow)">
<rect x="96" y="256" width="126" height="92" rx="20" fill="url(#card)" stroke="#38509b" stroke-opacity="0.7"/>
<rect x="114" y="276" width="50" height="10" rx="5" fill="#9eb1ff" opacity="0.85"/>
<rect x="114" y="298" width="60" height="20" rx="8" fill="#edf2ff" opacity="0.98"/>
<circle cx="196" cy="308" r="18" fill="#f7b267" opacity="0.16"/>
<path d="M189 308h8l5-7 4 11 4-8h7" fill="none" stroke="#f7b267" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g class="cardPulse cardPulse3" filter="url(#softShadow)">
<rect x="96" y="362" width="126" height="42" rx="16" fill="#22366e" stroke="#38509b" stroke-opacity="0.55"/>
<rect x="114" y="376" width="74" height="10" rx="5" fill="#dce5ff" opacity="0.86"/>
</g>
<g clip-path="url(#chartClip)">
<rect x="252" y="148" width="388" height="198" rx="22" fill="#0d1634" opacity="0.7"/>
<path d="M270 312H620" stroke="#3a4e92" stroke-opacity="0.5"/>
<path d="M270 268H620" stroke="#3a4e92" stroke-opacity="0.25"/>
<path d="M270 224H620" stroke="#3a4e92" stroke-opacity="0.25"/>
<path d="M270 180H620" stroke="#3a4e92" stroke-opacity="0.2"/>
<path class="trendGlow" d="M276 304 C312 298, 332 278, 362 282 S418 262, 446 248 S502 222, 534 232 S588 208, 614 180" fill="none" stroke="#56e0d0" stroke-width="10" opacity="0.18" filter="url(#glow)"/>
<path class="trendDraw" d="M276 304 C312 298, 332 278, 362 282 S418 262, 446 248 S502 222, 534 232 S588 208, 614 180" fill="none" stroke="url(#lineGrad)" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle class="dotFloat" cx="362" cy="282" r="7" fill="#56e0d0"/>
<circle class="dotFloat dotFloat2" cx="446" cy="248" r="7" fill="#6ea8ff"/>
<circle class="dotFloat dotFloat3" cx="534" cy="232" r="7" fill="#f7b267"/>
<rect x="568" y="162" width="34" height="34" rx="11" fill="#112048" stroke="#56e0d0" stroke-opacity="0.6"/>
<path d="M579 179l7 7 12-15" fill="none" stroke="#56e0d0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="520" y="272" width="72" height="28" rx="14" fill="#f7b267" opacity="0.14"/>
<path d="M532 286h48" stroke="#f7b267" stroke-width="3" stroke-linecap="round"/>
<g class="scan">
<rect x="252" y="148" width="388" height="54" fill="#ffffff" opacity="0.06"/>
</g>
</g>
<g filter="url(#softShadow)">
<rect x="252" y="358" width="388" height="46" rx="18" fill="#122046" stroke="#2b3a73" stroke-opacity="0.75"/>
<circle cx="280" cy="381" r="8" fill="#56e0d0"/>
<rect x="300" y="373" width="110" height="16" rx="8" fill="#dfe8ff" opacity="0.88"/>
<rect x="520" y="373" width="82" height="16" rx="8" fill="#f7b267" opacity="0.18"/>
<rect x="548" y="376" width="38" height="10" rx="5" fill="#f7b267" opacity="0.92"/>
</g>
</svg>