Area Chart

<!-- Area Chart -->
<div class="nuda-area-chart" role="img" aria-label="Area chart">
  <svg viewBox="0 0 120 60" fill="none" preserveAspectRatio="none">
    <defs>
      <linearGradient id="nac-grad" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%"   stop-color="#e4ff54" stop-opacity="0.55" />
        <stop offset="100%" stop-color="#e4ff54" stop-opacity="0" />
      </linearGradient>
    </defs>
    <path class="nuda-area-chart__area"
          d="M0 60 L0 40 C 15 28, 30 50, 45 35 S 75 22, 90 25 S 110 14, 120 18 L120 60 Z"
          fill="url(#nac-grad)" />
    <path class="nuda-area-chart__line"
          d="M0 40 C 15 28, 30 50, 45 35 S 75 22, 90 25 S 110 14, 120 18"
          stroke="#e4ff54" stroke-width="1.8" stroke-linecap="round" />
  </svg>
</div>

/* Area Chart
   Smooth filled area with a drawn outline above.
   Customize: --area-color, --area-duration */

.nuda-area-chart {
  --area-color: #e4ff54;
  --area-duration: 2.6s;
  width: 100%;
  max-width: 240px;
  height: 80px;
  padding: 4px;
  overflow: hidden;
}

.nuda-area-chart svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 4px rgba(228, 255, 84, 0.18));
}

.nuda-area-chart__area {
  transform-origin: bottom;
  transform: scaleY(0);
  animation: nuda-area-rise var(--area-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.nuda-area-chart__line {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  animation: nuda-area-draw var(--area-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes nuda-area-rise {
  0%        { transform: scaleY(0); opacity: 0.4; }
  40%, 75%  { transform: scaleY(1); opacity: 1;   }
  100%      { transform: scaleY(0); opacity: 0.4; }
}

@keyframes nuda-area-draw {
  0%        { stroke-dashoffset: 280; }
  40%, 75%  { stroke-dashoffset: 0;   }
  100%      { stroke-dashoffset: 280; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-area-chart__area { transform: scaleY(1); opacity: 1; animation: none; }
  .nuda-area-chart__line { stroke-dashoffset: 0; animation: none; }
}