qpkit

Generate an SVG background

Asset Maker generates seeded shapes and backgrounds in the browser. Choose an asset for a particular placement, such as a section divider or texture, rather than combining effects simply because they are available.

Open Asset Maker

  1. Choose the shape system

    Start with blobs, waves, contours or another available type. Adjust geometry and seed one setting at a time, leaving useful space where the content will sit.

  2. Use the project’s colors

    Choose colors that already belong to the page, or extract a starting palette from a reference. Check the actual foreground and background combination when the asset will sit behind text.

  3. Export and place it

    Download SVG for scalable vector shapes, or PNG, JPG or WebP at a suitable pixel size. Test the result in the real layout at different widths; cropping can change its balance.

Vector or pixels?

SVG retains scalable shapes. A raster export has fixed dimensions, and enlarging it later does not add detail. Keep enough resolution for the intended placement without treating the background as the main content.

Keep the seed while refining the shape

The seed makes a generated result repeatable. Changing sliders keeps that seed, so you can adjust density or geometry without replacing the entire composition. Randomize changes the seed. When a shape is close to what you need, refine it before randomizing again; otherwise it is harder to tell which setting improved the result.

Place a wave behind content

Save the generated SVG with the project’s images and use it as a background or a normal image. This CSS example assumes you have named the file wave.svg. Cover fills the area but can crop the edges, so check its balance in the actual mobile and desktop section.

.section {
  background-image: url("/images/wave.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

Choose a divider, pattern or illustration

A wave can separate sections, a repeating pattern can give a large plain area texture, and a blob can frame an illustration. These are different jobs: adding all three rarely improves the same placement. Check foreground text against both the quietest and busiest parts of the exported background.

Design, color and QR code tools