Gradient Stroke Path
A copy-paste animated gradients component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Animated GradientsHTMLCSSany framework
Copy into your project
HTML
<!-- Gradient Stroke Path -->
<svg class="nuda-ga2-svg-stroke" viewBox="0 0 200 120" width="200" height="120"
role="img" aria-label="Animated gradient stroke tracing a path">
<defs>
<linearGradient id="ga2SvgStrokeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#e4ff54" />
<stop offset="50%" stop-color="#22d3ee" />
<stop offset="100%" stop-color="#a855f7" />
</linearGradient>
</defs>
<path class="nuda-ga2-svg-stroke__path" d="M10,60 C50,10 150,110 190,60"
fill="none" stroke="url(#ga2SvgStrokeGradient)" stroke-width="4" stroke-linecap="round" />
</svg>CSS
.nuda-ga2-svg-stroke {
width: 200px;
height: 120px;
background: #09090b;
border-radius: 14px;
}
.nuda-ga2-svg-stroke__path {
stroke-dasharray: 260;
stroke-dashoffset: 260;
animation: _nuda-ga2svg-stroke-draw 3s ease-in-out infinite;
}
@keyframes _nuda-ga2svg-stroke-draw {
0% {
stroke-dashoffset: 260;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -260;
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-ga2-svg-stroke__path {
animation: none;
stroke-dashoffset: 0;
}
}
How to use Gradient Stroke Path
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.