A compact heatmap highlights shifting areas of interest.
Part of the Momentum Analytics Motion Kit. A compact heatmap highlights shifting areas of interest. 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 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>