svglava

Waves 7

Background Size

Waves (+/−): Add or remove waves (up to 20). Each wave is an independent animated layer.
Randomize: Generates a random scene with 3–8 waves. Tuned for calm results — avoids Blob, Easing, and Wild mode.
Background: Sets the background color behind all waves.
Size: Choose from preset canvas dimensions (800×600, ultrawide, full HD, mobile, social/OG, etc.).
Save / Load: Save and load .svglava project files (JSON format) to preserve your work.

⛶ Full Screen: Upper-left of preview. Runs waves full screen with no UI. Press ESC to exit. Invisible buttons in the upper-left let you exit or open a new tab.
▣ Open Viewer: Upper-left of preview. Opens a synchronized copy in a new tab. Control the scene from the main UI while viewing on another monitor.

Color: Primary fill color. Click the swatch to pick via sliders, eye dropper, or enter RGB/HSL/Hex values.
Gradient (arrow): Enables a vertical gradient from primary to a second color.
Opacity: Wave transparency from 0% (invisible) to 100% (fully opaque).
Position: Vertical placement. Lower values = higher on screen.
Angle: Rotates the wave 0–180° around the canvas center.
Inv: Adds 180° to the angle, flipping the wave direction.
Complex: Noise sample points (1–12). Higher = more detailed shapes. Lower = broad, gentle curves.
Intensity: Wave amplitude. Higher = taller peaks and deeper troughs.
Blob: Toggles bulbous, fire-like peaks via spline tension. Combined with Direction, humps respawn and morph. High speed + intensity + direction = fire effects.
Thick: Vertical space the wave fill occupies. Also affects gradient spread.
Speed: Animation speed. 0 freezes the wave.
Direction: Horizontal movement (−250 to 250). On blob waves, creates morphing/respawning motion.
Easing: Time-based ease-in/ease-out. Higher values create periodic surges where the wave speeds up and slows down.
Wild: Switches easing from regular periodic to noise-driven, randomized rhythm.

Animated SVG (JS): Full noise engine embedded in the SVG. Pixel-identical to the live preview. Browser-only — won't animate in OS preview panes.
Animated SVG (SMIL): Pre-sampled 24-frame SMIL animation. Works in Finder icons and Quick Look on macOS. Easing is approximated.
Static SVG: Single-frame snapshot. Set speed to 0 first to control exactly which frame you capture.
Animation Code: Just the JavaScript animation logic for embedding in your own projects.

If you enjoy svglava, consider leaving a tip!

Bitcoin (Lightning) limegrill293@walletofsatoshi.com

Ethereum (Base) whahappen.base.eth

ETH Wallet 0x185f1115E1830c4699cF1EeeD75c1DfbfeaC6d00