Pick a generator, tune the controls, watch the preview redraw, then ship the asset in whatever format your project needs — that is the whole loop of the SVG Generator. Nineteen generators cover the assets web designers reach for most: seamless background patterns, organic hero shapes, layered wave dividers, mesh and grainy gradients, and ready-made UI assets from placeholders to animated loaders. Everything is produced by a small pure engine that lives on the page, everything is deterministic when you pin a seed, and nothing is uploaded.
Four families, nineteen generators
Patterns tile seamlessly through SVG’s <pattern> element with patternUnits="userSpaceOnUse" — dots, grids, stripes, zigzags, crosshatch, honeycomb hexagons, a low-poly triangle scatter, and the classic bubble-wrap circle tiling. Control the tile size, the foreground opacity, the stroke weight and the rotation, and the pattern stays seamless at every combination. Shapes generate the hero-graphics staple set: the blobmaker-style organic blob (quadratic curves through jittered circle points), stars with adjustable point count and inner radius, sunbursts with per-ray length jitter, and smooth single or layered waves interpolated between two colors — Catmull-Rom smoothed, with a one-pixel overdraw so tiling edges never show a seam.
Gradients & texture give you the modern look-makers: a multi-stop linear or radial gradient with an angle dial, the mesh gradient approximation (blurred color circles composited through an sRGB filter — exactly how design tools fake true mesh gradients, since SVG 2 <mesh> ships in no browser), and the grainy gradient — a four-stage feTurbulence noise chain that designers know from every “grainy gradients” tutorial, with blend-mode controls. UI assets round out the set: dimension placeholders with cross lines and centered labels, symmetric identicon avatars (the GitHub mirrored-grid algorithm), and animated spinners — ring, dots, or bars — built on SMIL, which still animates in every current browser and even inside <img> tags and CSS backgrounds.
Seeded randomness you can trust
Every stochastic generator runs on a seeded mulberry32 PRNG. Pin the seed and the output is byte-identical on every machine, forever — which is exactly what you want when a teammate re-opens your share link or your build regenerates an asset. Hit Randomize for a fresh seed, or type a number and explore the neighborhood of a shape you almost like. The seed travels inside the share link, alongside every other control, in the URL fragment.
A workspace built for exploration
The generator library is visual: nineteen cards, grouped into the four families, each carrying a live thumbnail rendered by the same engine that draws the preview — so you shop for looks, not for names. Cards are real buttons with roving arrow-key navigation, and the strip scrolls sideways inside each family row. Twelve curated palettes sit underneath: one click recolors the background, foreground and accent together, and custom color picks simply deselect the swatch. For the seeded generators, a variation strip beside the preview shows six neighboring seeds as thumbnails — click one to adopt it, and the window slides forward, giving seed-space a sense of direction.
Designs you want to compare or keep can be saved into a small gallery (up to twelve, persisted in this browser only) and restored with one click. The preview itself gained a toolbar: switch surfaces (checker, light, dark), zoom to fit or 1:1 with a ladder of steps and ctrl-wheel, and open the canvas fullscreen for a close look. Canvas presets grew social sizes — Open Graph 1200 × 630, Full HD 1920 × 1080, Square HD 1080 × 1080 and a 256 × 256 icon — plus a one-click width/height swap, and a Surprise me button that rolls generator, palette and seed together.
Export in the format you actually need
The code panel shows the live document pretty-printed or minified with SVGO v4’s safe defaults: numbers rounded and leading zeros stripped, hex colors shortened, no default presentation attributes emitted in the first place, and viewBox plus accessibility metadata always kept. Copy either form as clean markup. Beyond raw SVG, the export matrix gives you a data URI using the minimal URL-encoding scheme (smaller than base64, gzip-friendly), a base64 data URI for legacy contexts, a ready-to-paste CSS snippet with the right background-size for tiled patterns versus full-bleed covers, and a React JSX component with SVGR’s exact attribute mapping — stroke-width becomes strokeWidth, class becomes className, style strings become style objects.
PNG export rasterizes at 1×, 2× or 3× through the canvas API, entirely in your browser, with explicit dimensions so Firefox and Safari size the raster correctly. The transparent-background toggle exports PNGs with real alpha — and because the engine never emits <foreignObject>, the canvas never gets tainted.
Designers’ details
The preview sits on a switchable checkerboard, light or dark surface so transparency and dark-mode contrast are checkable before you ship. The responsive toggle drops the fixed width/height and keeps the viewBox, producing the fluid embed that stretches with its container. The alt text field becomes a real <title> element inside the document, and the root carries role="img" — generated graphics land in your markup already accessible. Canvas presets cover 3:2, 16:9, 1:1, 4:3 and 9:16, with a custom mode for exact dimensions from 16 to 4000 pixels.
Your settings persist in localStorage between visits, share links carry the full state in the URL fragment (which browsers never send to servers), and Mod/Ctrl + Enter regenerates from anywhere in the tool.
Frequently asked questions
Is this another “draw shapes with a mouse” editor? No — it is a parametric generator. You describe the asset with controls and a seed; the engine emits clean, minimal SVG. It pairs naturally with hand editing: copy the markup out and keep iterating in your editor.
Why is the minified output trustworthy? The optimizer mirrors SVGO v4’s default preset decisions, applied at generation time: compact numbers (0.5 not 0.500), shortened hex colors, no redundant attributes, and it never strips viewBox or <title> — the two optimizations SVGO itself disabled by default because they damage scalability and accessibility.
Can I edit the generated SVG? Yes — copy the pretty form into any editor. The output is deliberately readable: two-space indentation, one element per line, ids derived from the seed.
Do the animated spinners work as files? Yes. SMIL animation runs from .svg files loaded through <img>, CSS background-image, and inline embedding. The PNG export naturally captures a single frame.
What are the limits? Canvas dimensions from 16 to 4000 pixels, up to 48 rays, 24 complexity steps, 8 wave layers, 6 gradient stops. The engine itself runs in microseconds — no debounce wars, no waiting.
What is the difference between Randomize, variations and Surprise me? Randomize rolls a new seed with your current generator and palette. The variation strip shows six named neighboring seeds you can adopt deliberately. Surprise me rolls generator, palette and seed together — a fresh starting point rather than a nudge.
Where do saved designs live? In your browser’s localStorage, capped at twelve, newest first. They never leave the device and never enter share links — restoring one re-applies its full control state to the tool.