webdevpuneet.com

Related Snippets

175 in Animations category
55–60 of 60

Canvas Star Trail Cursor

Canvas Pixelate Image Reveal

Canvas Wave Background

Canvas Fireworks Physics

Canvas Snow Overlay

Canvas Rainbow Mouse Trail

Canvas Wave Background — Free Layered Sine Ribbon Hero Effect

Canvas Wave Background · Animations · Plain HTML, CSS & JS · Live preview

CategoryAnimations
TagsCanvas

Copy & paste

Source Code

<section class="cwb-wrap">
  <canvas class="cwb-canvas" id="cwbCanvas"></canvas>
  <div class="cwb-content">
    <span class="cwb-tag">canvas 2d · layered sine ribbons</span>
    <h1>Ride the current</h1>
    <p>Four filled wave layers moving at independent speeds, amplitudes, and colors.</p>
    <button class="cwb-btn">Get started</button>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Filled ribbon shapes
Closed paths filled with translucent color, not stroked lines.
Four independent layers
Each with its own baseline, amplitude, wavelength, and speed.
Bidirectional drift
Negative speeds move some layers opposite others.
Dual-sine ribbons
A secondary wave term breaks up regular crest spacing.
Depth via opacity and baseline
No blur filter — just staggered contrast and position.
High-DPI canvas sizing
devicePixelRatio scaling keeps edges crisp on Retina.
Fully responsive
Resizes and redraws to fill any wrapper size.
Zero dependencies
Pure Canvas 2D and vanilla JS.

About this UI Snippet

Canvas Wave Background — Layered Sine Ribbons for a Sense of Depth

Screenshot of the Canvas Wave Background snippet rendered live

A single animated sine wave reads as a wiggling line. This snippet stacks four of them — each with its own baseline height, amplitude, wavelength, speed, and translucent fill — to produce the smooth, layered look of ocean swells rolling behind a hero section, built entirely with filled canvas paths rather than strokes.

Why filled shapes instead of strokes

Every layer is drawn as a closed path: start at the bottom-left corner, trace the sine curve left to right, drop down to the bottom-right corner, and close back to the start. Filling that shape with a translucent color is what gives each wave visual weight and lets it convincingly occlude the layers behind it — a stroked line would only ever look like a wire outline, with nothing suggesting mass or water beneath the surface.

Depth from staggered baselines and speed, not blur

Each of the four LAYERS has a different baseline (how far down the canvas its resting line sits) and a different speed — including negative values, so some layers drift right while others drift left. Combined with decreasing opacity for layers further down, that's the entire depth illusion: nearer waves move faster and sit higher with more contrast, farther waves move slower, sit lower, and fade toward the background color. No blur filter or z-axis is involved.

Two sine terms per layer, not one

drawLayer() doesn't plot a pure sine curve — it sums a primary wave with a smaller secondary one at a different frequency and phase speed: Math.sin(x * k + t * speed) * amplitude plus a lighter Math.sin(x * k * 1.7 - t * speed * 1.3) term. That second term breaks up the otherwise perfectly regular crest spacing, so each ribbon has a subtle irregularity to it rather than looking like a textbook sine plot — the same "combine two waves" idea used in aurora background and wavy background, applied here to filled ribbons instead of strokes or gradients.

High-DPI sizing done once

resize() scales the canvas backing store by devicePixelRatio (capped at 2) and applies a matching ctx.setTransform, so every coordinate in drawLayer stays in plain CSS pixels while still rendering crisply on Retina displays — the same pattern worth reusing in any full-bleed canvas background.

Tuning the current

Add or remove entries in LAYERS to change how many ribbons stack; push baseline values further down and amplitude up for a stormier feel, or flatten amplitudes and slow every speed for a calm, barely-moving backdrop. Pair it with gradient mesh hero for a softer companion background, or ripple background for an interactive water effect alongside it.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSFour wave ribbons animate immediately behind the hero content.
  2. 2
    Watch the layeringNearer waves move faster and sit brighter; farther ones lag and fade.
  3. 3
    Resize the windowThe canvas rescales for devicePixelRatio and viewport size.
  4. 4
    Add a layerPush a new object into LAYERS with its own baseline/speed/color.
  5. 5
    Change the moodRaise amplitude and speed for choppier water, lower for calm.
  6. 6
    Swap the paletteChange each layer's rgba() fill for a different time of day.

Real-world uses

Common Use Cases

SaaS and product hero sections
Provide a calm animated backdrop with four filled sine ribbons, each with its own baseline, amplitude, wavelength and speed.
Ocean and travel brand pages
Use a literal wave motif for water-themed brands, with some layers drifting opposite to others for natural swell.
Canvas background families
Pair with the aurora background elsewhere in a site, with dual-sine ribbons breaking up regular crest spacing.
Section divider strips
Crop to a short wave strip between two sections for a lively transition that is more interesting than a static curve.
Login and ripple combinations
Place behind a sign-in card for a subtle moving background, and combine with a ripple background for layered water motion.
Related: Cursor Spotlight Reveal
See the Cursor Spotlight Reveal for a related animations pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Each layer traces a sine curve and then closes the path down to the bottom of the canvas before filling it, which gives the wave visual weight and lets it convincingly occlude the layers behind it. A stroked line would only ever render as a thin wire outline with nothing suggesting mass or water beneath the surface, so filling is what makes the effect read as waves rather than a wiggling graph line.

Depth comes entirely from four values that differ per layer: baseline height (farther layers sit lower), speed (nearer layers move faster, including some drifting in the opposite direction from others), amplitude, and fill opacity (farther layers are more transparent, blending toward the background color). Stacking those differences is enough to read as foreground-to-background depth without any blur filter or actual z-axis.

A single Math.sin term produces perfectly regular, evenly spaced crests that can look mechanical. Adding a second, smaller sine term at a different frequency and phase speed — Math.sin(x * k * 1.7 - t * speed * 1.3) at roughly 30% amplitude — breaks up that regularity, so each ribbon has a subtle, non-repeating irregularity that reads as more natural water motion.

Very high-density phone displays can report a devicePixelRatio of 3 or more, and sizing the canvas backing store that large multiplies memory use and fill-rate cost for very little visible sharpness improvement over 2x. Capping it at 2 keeps the canvas crisp on virtually all displays while avoiding an oversized backing store on the highest-density devices.

Move the canvas ref, resize() call, and requestAnimationFrame loop into a mount effect, store the animation frame id, and cancelAnimationFrame it in the cleanup function so the loop stops when the component unmounts. Re-run resize() from a ResizeObserver on the wrapper element if the background needs to track a container that can change size independent of the window.