# SVG Wave Generator - Blobs, Patterns, Peaks, SVG & CSS

> Generate SVG decorations: layered waves, random blobs, dot, hex and topographic patterns, layered peaks; gradients and seeds; export SVG, PNG, CSS or React.

- URL: https://qilingtools.com/en/svg-shapes
- Category: Developer Tools (https://qilingtools.com/en/dev)
- Tags: [Design](https://qilingtools.com/en/tags/design), [Developer](https://qilingtools.com/en/tags/dev), [Frontend](https://qilingtools.com/en/tags/frontend)
- Last updated: 2026-10-26
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

A wave divider at the bottom of a hero section, a soft blob behind a card, a subtle dot or contour texture in empty space — decorations like these are crisp and tiny as SVG. This tool generates four kinds. Waves stack one to six layers with adjustable amplitude, number of crests and randomness, in smooth, sharp or stepped styles, at the top or bottom. Blobs are smooth closed curves through a set of control points, with adjustable complexity and contrast, filled or outlined. Patterns include dots, lines, zigzag, checkerboard and hexagons with tile size, weight and rotation, plus a topographic contour texture traced with marching squares over a noise field. Layered peaks build mountain ridges from fractal noise, shaded from far to near. Any shape can use a two-color gradient or solid fill, a transparent or solid background and any canvas size. Everything is driven by a seed, so the same settings and seed always give the same shape and a new seed gives a new one. Path coordinates are rounded to the precision you choose with redundant zeros stripped, keeping the SVG lean. Download SVG or 1–3× PNG, or copy CSS ready for background-image (a URL-encoded data URI) or a React component that accepts props.

## How to use

1. Choose waves, blob, pattern or layered peaks and adjust layers, amplitude, complexity and so on
2. Set colors, gradient, background and canvas size, and click Shuffle to try other seeds
3. Download SVG or PNG, or copy the CSS background or React component

## Features

- Layered waves: smooth, sharp or stepped, top or bottom
- Random blobs with complexity and contrast, filled or outlined
- Dot, line, zigzag, checkerboard and hexagon patterns
- Noise-based topographic contour texture
- Fractal-noise layered peaks
- Gradient fills and transparent backgrounds
- Reproducible seeds and adjustable coordinate precision
- Export SVG, PNG, CSS data URI and React component

## FAQ

### How do I put a wave at the bottom of a section?

Choose Bottom, export the SVG and place it at the end of the section with display:block and width:100%, or use the CSS as a pseudo-element background. Waves use preserveAspectRatio="none", so they stretch to the container’s width. Use Top for the start of the next section, and match the fill to the neighboring background for a seamless edge.

### What is the seed for?

All randomness comes from the seed: the same settings and seed always produce the same shape, so you can note it down, reproduce it later or share it with teammates. Shuffle picks a new random seed; when you like a shape, keep its number.

### Which coordinate precision should I use?

Precision is the number of decimals kept in path coordinates. Zero gives the smallest file and is visually identical at typical sizes; use one or two decimals for very large renders or fine outlines. Leading zeros and extra spaces are stripped too, to keep the file small.

### CSS background or inline SVG?

A CSS background embeds the SVG as a data URI in your stylesheet with no extra request — ideal for pure decoration, but you can’t restyle its colors. Inline SVG or the React component can be styled with CSS or props and animated. Patterns exported as CSS are set to repeat.

## Related tools

- [JSON Formatter](https://qilingtools.com/en/json): Free online JSON formatter: beautify or minify, validate with the exact line and column of any error, browse a collapsible tree, sort keys and escape strings.
- [Base64 Encode/Decode](https://qilingtools.com/en/base64): Free online Base64 encoder and decoder: UTF-8 safe, optional URL-safe variant, convert text to Base64 and back in real time. Processed locally, never uploaded.
- [URL Encode/Decode](https://qilingtools.com/en/url-encode): Free online URL encoder and decoder with encodeURIComponent and encodeURI modes. Escapes Chinese, spaces and special characters. Real-time and local, no upload.
- [JWT Decoder](https://qilingtools.com/en/jwt): Free online JWT decoder: decode the header and payload of a JSON Web Token, show expiry and issued-at times, all locally without uploading the token.
- [Timestamp Converter](https://qilingtools.com/en/timestamp): Free online Unix timestamp converter: convert timestamps and dates, auto-detect seconds or milliseconds, and show local, UTC, ISO 8601 and relative time.
- [Hash / Checksum](https://qilingtools.com/en/hash): Free online hash calculator: SHA-1, SHA-256, SHA-384 and SHA-512 of text or any file through the browser crypto API. Files never leave your device.
- [UUID Generator](https://qilingtools.com/en/uuid): Free online UUID generator: create RFC 4122 UUID v4 in bulk with a cryptographic RNG. Options for uppercase, no hyphens and braces, with one-click copy.
- [Base Converter](https://qilingtools.com/en/base-convert): Free online number base converter: convert between binary, octal, decimal, hexadecimal and any base 2–36. Uses BigInt for huge integers, computed locally.