Wave Divider
A copy-paste dividers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
DividersHTMLCSSany framework
Copy into your project
HTML
<svg class="nuda-wave-divider" viewBox="0 0 400 24" preserveAspectRatio="none"
role="separator" aria-hidden="true">
<path class="nuda-wave-divider__path"
d="M0 12 Q25 0 50 12 Q75 24 100 12 Q125 0 150 12 Q175 24 200 12
Q225 0 250 12 Q275 24 300 12 Q325 0 350 12 Q375 24 400 12"
fill="none" stroke="currentColor" stroke-width="1.5" />
</svg>CSS
/* Wave Divider
SVG wave line that draws itself in.
Customize: --wave-color, --wave-opacity */
.nuda-wave-divider {
--wave-color: #e4ff54;
--wave-opacity: 0.4;
width: 100%;
height: 24px;
color: var(--wave-color);
opacity: var(--wave-opacity);
}
.nuda-wave-divider__path {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: nuda-wave-draw 2s ease forwards;
}
@keyframes nuda-wave-draw {
to {
stroke-dashoffset: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.nuda-wave-divider__path {
animation: none;
stroke-dashoffset: 0;
}
}How to use Wave Divider
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.