Vector artwork with no drawing required
Two different kinds of generated SVG: organic blob shapes for backgrounds and decorative accents, and repeating patterns — dots, lines, waves — for tileable textures. Both are real, resolution-independent vector output, not a raster image pretending to be one, so they stay perfectly sharp at any size and weigh only a few hundred bytes to a few kilobytes as a file.
Blobs versus patterns
| Mode | What it produces | Typical use |
|---|---|---|
| Blob | One organic, rounded, irregular shape | A background accent behind a hero image or headline, a decorative section divider |
| Pattern — dots | A repeating grid of dots | A subtle textured background |
| Pattern — lines | Repeating straight lines at an angle | Diagonal stripe backgrounds, texture overlays |
| Pattern — waves | A repeating wave motif | Section dividers, playful backgrounds |
Why SVG rather than a generated PNG
- Infinitely scalable. The same file looks identical at 100 pixels or 4000 pixels wide — no raster upscaling softness.
- Tiny file size. A pattern that would be many kilobytes as a PNG is often a few hundred bytes as SVG, since it is described as instructions rather than stored pixel by pixel.
- Colour-editable after export. An SVG's fill colour can be changed directly in the file's code, or overridden with CSS on a web page — no regenerating the image needed for a simple recolour.
- Crisp on any display density, including high-DPI retina screens, with nothing extra required.
Using the output
For a tileable pattern used as a CSS background, set background-repeat to its default value (repeating) and the pattern continues seamlessly in both directions, since it is generated to tile without a visible seam. A blob shape is generally used once, as a single decorative element, rather than repeated. Either can be placed directly as an <img>, embedded inline in HTML for more control (like animating it with CSS), or set as a CSS background-image.