Wavy Lines Background
Rows of wavy lines ripple past each other in opposite directions, bold in front and pale behind, like a woven wave print. Each set is one small SVG tile used as a mask and moved by its own width.
Also known as: wavy background animation css, wavy lines pattern css, squiggle pattern background.
HTML
<div class="bgx-wavy-pattern" aria-hidden="true"> <span class="bgx-wavy-pattern-back"></span> <span class="bgx-wavy-pattern-front"></span> </div>
CSS
.bgx-wavy-pattern {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10Q10 3 20 10T40 10' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
--tw: 3em;
--th: 1.5em;
background: color-mix(in srgb, var(--c) 6%, #fff);
}
.bgx-wavy-pattern span {
position: absolute;
inset: 0 calc(var(--tw) * -1);
-webkit-mask: var(--wave) 0 var(--y) / var(--tw) var(--th);
mask: var(--wave) 0 var(--y) / var(--tw) var(--th);
}
.bgx-wavy-pattern-back {
--y: calc(var(--th) / 2);
background: color-mix(in srgb, var(--c) 28%, transparent);
animation: bgx-wavy-pattern-right 5s linear infinite;
}
.bgx-wavy-pattern-front {
--y: 0;
background: color-mix(in srgb, var(--c) 70%, transparent);
animation: bgx-wavy-pattern-left 3s linear infinite;
}
@keyframes bgx-wavy-pattern-left {
to { transform: translateX(calc(var(--tw) * -1)); }
}
@keyframes bgx-wavy-pattern-right {
to { transform: translateX(var(--tw)); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-wavy-pattern, .bgx-wavy-pattern *, .bgx-wavy-pattern::before, .bgx-wavy-pattern::after, .bgx-wavy-pattern *::before, .bgx-wavy-pattern *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.