Wave Grid

What this grid is

A Wave Grid starts from a regular line grid and applies a smooth sinusoidal displacement. It keeps the overall “grid” organization, but replaces straight lines with wavy curves. This is useful when you want structure without stiffness, or when you want motion and rhythm in a background.

Key parameters

• Columns / Rows (cells) — Grid density; more cells gives more lines and more detail.
• Spacing X / Spacing Y (px) — Distance between the base grid lines before warping.
• Direction — Horizontal waves, vertical waves, or both.
• Amplitude (px) — Wave height; 0 makes a normal line grid.
• Wavelength (px) — Distance between wave peaks; smaller values increase detail and SVG complexity.
• Phase (deg) — Shifts the wave along its cycle.
• Phase Step (deg/line) — Adds a gradual phase drift across lines to create a flowing, moiré-like motion.
• Line Width / Opacity / Color — Stroke styling for the warped lines.

Unique highlights

• Keeps grid-like order while adding an organic, animated feeling.
• “Both” direction creates a woven interference look without needing separate patterns.
• Phase Step is a powerful control for gradients of motion and visual depth.

Typical use cases

• Subtle background textures for web and print.
• Decorative linework for posters, covers, and branding.
• Underlays for maps, diagrams, and technical illustrations (when straight grids feel too rigid).
• Generative art bases for clipping masks and distortion experiments.
• Pattern fills behind typography.

Tips

• Start with small amplitude (e.g., 4–16px) and tune wavelength until the rhythm feels right.
• If curves look too busy, increase wavelength or reduce columns/rows.
• For a calm “water” feel, use horizontal direction and a long wavelength.
• For a dynamic interference feel, use “Both” plus a small Phase Step.

FAQ