Wave Divider
A copy-paste dividers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
DividersHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-wave-line" role="separator" aria-hidden="true">
<svg class="nuda-wave-line__svg" viewBox="0 0 200 24" preserveAspectRatio="none">
<path d="M0 12 Q12.5 0 25 12 T50 12 T75 12 T100 12 T125 12 T150 12
T175 12 T200 12 T225 12 T250 12"
fill="none" stroke="#e4ff54" stroke-width="1.5" />
</svg>
</div>CSS
/* Wave Divider
An SVG wave that scrolls horizontally.
Customize: stroke color, opacity */
.nuda-wave-line {
width: 100%;
height: 24px;
overflow: hidden;
opacity: 0.5;
}
.nuda-wave-line__svg {
display: block;
width: 125%;
height: 100%;
animation: nuda-wave-line-slide 2s linear infinite;
}
@keyframes nuda-wave-line-slide {
from { transform: translateX(0); }
to { transform: translateX(-20%); }
}
@media (prefers-reduced-motion: reduce) {
.nuda-wave-line__svg { animation: none; }
}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.