Wireframe Ocean Vector Waves

This is a Wireframe Ocean Vector Waves background. It renders multiple layered vector paths using mathematical sine functions to simulate a rolling sea. Its function is to create a dynamic, highly illustrative hero section, integrating static text behind a moving fluid layer to establish a strong sense of depth.

Specs

• Weight: ~80 KB (Dependencies: Paper.js).
• Performance: Moderate. Drawing and smoothing (path[i].smooth()) 13 separate vector paths with 15 nodes each on every frame via the Canvas API can consume GPU/CPU resources on low-end mobile devices.
• Theming / Customization: Driven entirely by JavaScript variables (strokeWidth, strokeColor, fillColor, speed, offset, pathCounts).
• Responsiveness: Native. The script listens to window.onresize and completely tears down and re-initializes the canvas paths to match the new dimensions.
• Web APIs: Canvas API.
• Graceful Degradation: [!] If JavaScript fails, the canvas remains empty. The user will only see the blue CSS gradient background and the text “WAVES”.

Anatomy

• HTML: Extremely minimal. A <canvas id="bend"> layer sits at z-index: 2, placed strictly over a <span> text layer at z-index: 1.
• CSS: Sets the deep ocean linear-gradient and centers the typography. It handles the absolute positioning that allows the canvas to overlap the text.
• JS: Powered by Paper.js. It initializes an array of Path objects, injects vector points across the horizon, and continuously manipulates their Y-coordinates inside a view.onFrame rendering loop.

Logic

The architectural highlight is the procedural animation of vector segments using staggered sine waves, combined with a z-depth illusion.

view.onFrame = function(event) {
  for (p = 0; p < pathCounts; p++) {
    for (s = 0; s < pathPoints; s++) {
      var value = (s % 2) ? -1 : 1;
      var segment = path[p].segments[2 + s];
      
      // Calculate dynamic Y position
      segment.point.y = horizon + ((Math.sin((event.time + s * delay) * speed)) * (frequency[s] * value + (p * offset * value)));
    }
  }
}

Instead of moving a static image asset, the script alters the specific y coordinates of individual vector nodes on every frame. Math.sin() uses the global event.time multiplied by a speed factor, staggered by the segment index (s * delay).

Crucially, the first path (i == 0) is assigned a solid white fillColor, while the remaining 12 paths only have strokes. Because the canvas sits above the text layer in the CSS stacking context, this solid white wave acts as an opaque physical barrier, obscuring the lower half of the word “WAVES” and giving the illusion that the text is submerged in the wireframe sea.

Feel

Mesmerizing and mathematical. The waves do not crash; they undulate smoothly like a digital topographic map. The overlap of the solid white wave over the text grounds the typography in the environment, making it feel like it is emerging from a digital sea rather than just floating passively on a webpage.