Sparkline
A copy-paste charts component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
ChartsHTMLCSSany framework
Copy into your project
HTML
<!-- Sparkline -->
<div class="nuda-sparkline" role="img" aria-label="Sparkline trend">
<svg viewBox="0 0 100 30" fill="none" preserveAspectRatio="none">
<path d="M2 22 L14 18 L24 24 L36 14 L48 19 L60 11 L72 16 L84 8 L96 12"
stroke="#e4ff54" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
<circle class="nuda-sparkline__dot" cx="96" cy="12" r="2.5" fill="#e4ff54" />
<circle class="nuda-sparkline__pulse" cx="96" cy="12" r="2.5"
fill="none" stroke="#e4ff54" stroke-width="1" />
</svg>
</div>CSS
/* Sparkline
Compact trend line with a glowing end-dot pulse.
Customize: --spark-color, --spark-width, --spark-height */
.nuda-sparkline {
--spark-color: #e4ff54;
--spark-width: 140px;
--spark-height: 40px;
width: var(--spark-width);
height: var(--spark-height);
padding: 2px;
}
.nuda-sparkline svg {
width: 100%;
height: 100%;
}
.nuda-sparkline__dot {
filter: drop-shadow(0 0 4px var(--spark-color));
}
.nuda-sparkline__pulse {
transform-origin: 96px 12px;
animation: nuda-spark-pulse 1.6s ease-out infinite;
}
@keyframes nuda-spark-pulse {
0% { r: 2.5; opacity: 0.8; }
100% { r: 10; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-sparkline__pulse { animation: none; opacity: 0; }
}How to use Sparkline
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.