Heat Map Density

<div class="nuda-ml2-heatmap">
  <div class="nuda-ml2-heatmap__field" aria-hidden="true">
    <span class="nuda-ml2-heatmap__grid"></span>
    <span class="nuda-ml2-heatmap__blob nuda-ml2-heatmap__blob--hot" style="left:32%;top:45%"></span>
    <span class="nuda-ml2-heatmap__blob nuda-ml2-heatmap__blob--warm" style="left:62%;top:60%"></span>
    <span class="nuda-ml2-heatmap__blob nuda-ml2-heatmap__blob--warm" style="left:72%;top:25%"></span>
  </div>
  <p class="nuda-ml2-heatmap__text">Traffic density — highest near <strong>Downtown</strong></p>
</div>

.nuda-ml2-heatmap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 240px;
  max-width: 100%;
}

.nuda-ml2-heatmap__field {
  position: relative;
  width: 240px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg,#0c0c10,#1a1a20);
  border: 1px solid rgba(255,255,255,.06);
}

.nuda-ml2-heatmap__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size: 16px 16px;
}

.nuda-ml2-heatmap__blob {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  filter: blur(14px);
  mix-blend-mode: screen;
  animation: _nuda-ml2heatmap-pulse 4s ease-in-out infinite;
}

.nuda-ml2-heatmap__blob--hot {
  background: radial-gradient(circle,rgba(255,94,70,.9),transparent 70%);
}

.nuda-ml2-heatmap__blob--warm {
  background: radial-gradient(circle,rgba(228,255,84,.6),transparent 70%);
  animation-delay: 1.2s;
}

.nuda-ml2-heatmap__text {
  margin: 0;
  font-size: 12px;
  color: #cfcfcf;
}

.nuda-ml2-heatmap__text strong {
  color: #fafafa;
  font-weight: 700;
}

@keyframes _nuda-ml2heatmap-pulse {
  0%,100% {
    opacity: .6;
    transform: translate(-50%,-50%) scale(.9);
  }
  50% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.15);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ml2-heatmap__blob {
    animation: none !important;
    opacity: .85;
    transform: translate(-50%,-50%) scale(1);
  }
}