Wave Morph
A copy-paste morphing shapes component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Morphing ShapesHTMLCSSany framework
Copy into your project
HTML
<!-- Wave Morph — animated SVG wave divider (SMIL, dependency-free) -->
<div class="nuda-morph-wave" aria-hidden="true">
<svg viewBox="0 0 200 60" width="100%" height="60" preserveAspectRatio="none">
<path fill="#e4ff54" d="M0,30 Q50,10 100,30 T200,30 V60 H0 Z">
<animate
attributeName="d"
dur="5s"
repeatCount="indefinite"
values="M0,30 Q50,10 100,30 T200,30 V60 H0 Z;
M0,30 Q50,50 100,30 T200,30 V60 H0 Z;
M0,30 Q50,10 100,30 T200,30 V60 H0 Z"
/>
</path>
</svg>
</div>CSS
/* Wave Morph
An SVG wave divider whose crest/trough morph via SMIL <animate>.
Layout + a11y handled in CSS; the morph is in the markup.
Customize: change the <path fill> or the path "values". */
.nuda-morph-wave {
border-radius: 8px;
overflow: hidden;
background: #09090b;
display: flex;
align-items: flex-end;
}
.nuda-morph-wave svg {
display: block;
}
@media (prefers-reduced-motion: reduce) {
.nuda-morph-wave svg animate {
display: none;
}
}How to use Wave Morph
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.