SVG pattern generator

Three handoffs, same afternoon

Marketing wants a texture behind a quote card. You export one SVG, they drop the asset into a slide master, and the pattern scales without jagged JPEG blocks.

A front-end teammate needs a repeating fill for a CSS experiment. You paste the serialized markup from the copy button, they hoist the <pattern> into a sprite sheet or inline style block.

You are storyboarding a product tour in a design tool. A quick download gives you a square artboard you trace with vector scissors later. None of these workflows require an account or a queue.

The engine is embarrassingly literal

Each render builds one SVG document with a defs block, a single pattern element sized to your spacing value, and one motif drawn inside the first tile. A full-bleed rectangle on top fills an 800 by 800 view box with url(#id), so the file stays small compared with hundreds of duplicated shapes.

Sliders recompute on input events, which means phones update while the thumb drags. Spacing never drops below motif size plus a few pixels, so you avoid accidental overlap glitches unless you force them elsewhere.

patternUnits keeps the math honest

Many intro tutorials draw twenty circles by hand inside a square and call the job done. You get a pretty preview until someone stretches the SVG across a wide banner and the density collapses because nothing repeats.

Here the repeat lives inside a pattern node with patternUnits="userSpaceOnUse". Width and height equal your spacing slider, so one motif stamps across the plane like floor tiles. The outer rectangle simply paints an 800 by 800 field, which is large enough for slides, social mocks, and most hero crops without editing numbers by hand.

Object-bounding-box patterns have their place when you want a texture to stretch with a weird shape, yet those fills confuse designers who expect centimeters or pixels. Sticking to user space matches how people reason about gutters in layout software.

Contrast checks still belong in your checklist

A faint gray grid behind charcoal type often passes mood boards and fails WCAG once marketing boosts headline weight. After you export, squint at the page on a phone outdoors, not only on a calibrated studio display.

Opacity is a blunt instrument: lowering motif strength helps until the background becomes mush. Sometimes the better fix is a darker canvas color with a slightly stronger stroke, not another ten percent off the slider.

Vectors versus bitmaps in performance

Where hand tracing still wins

This page repeats one stamp inside a rectangular grid. Organic illustrations, brush strokes, and motifs with deliberate randomness still belong in a dedicated vector editor.

Hex mode here draws a single polygon per cell, not a full honeycomb offset lattice. If you need mathematically perfect bee-grid tiling, draft the offset rows manually or import from a CAD-friendly source.

Exported files declare sRGB fills. Print shops with CMYK separations should convert inside software they trust, not inside a browser toy.

Shortcut: load a preset, twist one slider

Presets exist so you stop staring at a blank canvas. After you tap “Soft gray dots,” nudge spacing alone until the rhythm matches your type scale.

• Rotation pairs well with triangles and squares when you want a woven feel without drawing custom paths.
• Opacity is separate from canvas color, so you simulate tinted paper by lowering motif strength instead of picking a muddy fill.
• When you already extracted a brand hex elsewhere, paste the value into the motif picker after you visit color extractor on a reference screenshot.

Stack with compression when bytes matter

SVG text compresses well with gzip on most CDNs, yet some teams still prefer an optimized raster for hero imagery. After you settle on a look, run heavy photographic layers through smart optimizer while keeping this pattern as the lightweight overlay.

Transparent product shots pair with busy tiles when you knock back opacity first; otherwise the subject fights the background. Transparent background helps when the catalog still has a solid studio sweep you need gone.