Line Chart Draw

<!-- Line Chart Draw -->
<div class="nuda-line-chart" role="img" aria-label="Line chart">
  <svg viewBox="0 0 120 60" fill="none" preserveAspectRatio="none">
    <defs>
      <linearGradient id="nlc-grad" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%"   stop-color="#e4ff54" stop-opacity="0.4" />
        <stop offset="100%" stop-color="#e4ff54" stop-opacity="0" />
      </linearGradient>
    </defs>
    <path class="nuda-line-chart__area"
          d="M2 50 L20 35 L40 42 L60 22 L80 30 L100 12 L118 18 L118 58 L2 58 Z"
          fill="url(#nlc-grad)" />
    <path class="nuda-line-chart__line"
          d="M2 50 L20 35 L40 42 L60 22 L80 30 L100 12 L118 18"
          stroke="#e4ff54" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
    <circle class="nuda-line-chart__dot" cx="118" cy="18" r="3" fill="#e4ff54" />
  </svg>
</div>

/* Line Chart Draw
   SVG path that draws itself, area fades in, end-dot pops.
   Customize: --line-color, --line-width, --line-duration */

.nuda-line-chart {
  --line-color: #e4ff54;
  --line-width: 2px;
  --line-duration: 3.2s;
  width: 100%;
  max-width: 240px;
  height: 80px;
  padding: 4px;
}

.nuda-line-chart svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px rgba(228, 255, 84, 0.2));
}

.nuda-line-chart__line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: nuda-line-draw var(--line-duration) ease-in-out infinite;
}

.nuda-line-chart__area {
  opacity: 0;
  animation: nuda-line-fade var(--line-duration) ease-in-out infinite;
}

.nuda-line-chart__dot {
  opacity: 0;
  animation: nuda-line-pop var(--line-duration) ease-in-out infinite;
}

@keyframes nuda-line-draw {
  0%        { stroke-dashoffset: 300; }
  40%, 80%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 300; }
}

@keyframes nuda-line-fade {
  0%, 30%   { opacity: 0; }
  50%, 80%  { opacity: 1; }
  100%      { opacity: 0; }
}

@keyframes nuda-line-pop {
  0%, 38%   { opacity: 0; r: 0; }
  45%, 80%  { opacity: 1; r: 3; }
  100%      { opacity: 0; }
}

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