Uwarp

Adjust controls to generate a pattern.

Matrix (grid density)
Proportion (canvas fill)
Dot radius
Amplitude
Waves
Frequency

Help Us Improve

—

(—)

Dot pattern generator for matrix backgrounds

Create dot matrix patterns with wave displacement in your browser. Tune grid density, dot radius, amplitude, and frequency—export PNG or SVG.

What is a dot matrix pattern generator?

A dot pattern generator places a grid of circles on a canvas, then displaces each dot with noise-driven wave settings so the field feels organic instead of rigid. This hosted tool recreates the Durves-style workflow from the open-source Durves project: adjust matrix density, proportion, color, dot radius, amplitude, waves, and frequency on a live preview, then download a transparent PNG or SVG for hero backgrounds, posters, and UI textures. Processing runs entirely in your browser.

Pattern generator features

Controls for matrix dot fields and wave-driven displacement.

  • Matrix grid density

    Set rows and columns together—from sparse 16×16 fields to dense 152×152 matrices.

  • Proportion and dot radius

    Scale how much of the canvas the grid covers and how large each dot renders.

  • Wave displacement

    Amplitude, waves, and frequency shift dot positions with smooth noise for ripple-like motion.

  • Color and transparency

    Pick any dot color and export with a transparent background for layering in design tools.

  • Live canvas preview

    See the pattern update instantly as sliders move—no server upload required.

  • PNG and SVG export

    Download high-resolution PNG (2160×2160) or vector SVG for print and web workflows.

How to create a dot pattern background

From grid setup to export in three steps.

  1. Set matrix and proportion

    Start with matrix density and proportion so the field reads at your target width before fine-tuning waves.

  2. Tune wave controls

    Adjust amplitude, waves, and frequency until displacement feels structured or fluid for your layout.

  3. Export PNG or SVG

    Download SVG for crisp scaling in Figma or Illustrator, or PNG when you need a raster hero background.

Tips for dot pattern backgrounds

Keep abstract fields readable behind real content.
  • 01

    Lock color early

    Match dot color to brand neutrals before pushing amplitude so contrast stays predictable.

  • 02

    Reduce density for text overlays

    Lower matrix values when the pattern sits behind headlines so type stays legible.

  • 03

    Prefer SVG for large prints

    Vector export scales cleanly; PNG is better for quick social or slide assets.

  • 04

    Note your slider set

    Save parameter combinations you like—reset returns defaults but does not store presets.

Great for

When a procedural dot field helps the workflow.

  • Marketing hero backgrounds

    Generate abstract textures without a 3D or illustration pipeline.

  • UI and brand designers

    Quick matrix-style fills for landing pages, decks, and social covers.

  • Prototypers

    Drop visual interest behind mock UI when you need placeholder art fast.

  • Print and poster work

    Export SVG or high-res PNG for layouts that need scalable dot art.

Why use this pattern tool

Browser-based dot matrix generator benefits.

  • No install

    Preview and export in one page—sliders apply immediately.

  • Private processing

    Patterns render locally; nothing uploads to a server.

  • Transparent exports

    Layer dot fields over photography or gradients in any editor.

  • Open-source lineage

    Inspired by the Durves dot-pattern project—reimplemented for this site.

Technical details

How the dot pattern engine works.
Displacement math
Each grid cell offset uses 2D value noise: noise2D(x × waves, y × waves, frequency, amplitude), rounded to integer pixels.
Export size
PNG downloads at 2160×2160; preview renders at 720×720 for responsive feedback.
Controls
Matrix 16–152, proportion 0.1–1, dot radius 1–8, amplitude −150–150, waves −10–10, frequency 0–0.005.
Outputs
Transparent or black-backed PNG; SVG circles with matching coordinates.
Processing
Client-side Canvas 2D only—no backend pattern engine.

Sources & References

Authoritative references on procedural dot pattern generation, value noise displacement, and the SVG/PNG export formats this tool uses.
  • “Durves is an open-source dot pattern tool that generates matrix-based abstract fields with wave displacement controlled by amplitude, waves, and frequency parameters.”
    — Durves on GitHub

    Durves — dot pattern generation tool: This tool is a reimplementation inspired by the open-source Durves project. The canvas-based engine places a grid of circles and displaces each dot using value noise to create organic, ripple-like matrix patterns. durves.vercel.app/

  • “Value noise is a lattice-based noise function that produces smoothly varying pseudo-random values by interpolating between grid corner values. It is commonly used for procedural texture generation in computer graphics.”
    — The Book of Shaders — Noise

    Value noise for procedural displacement: The wave displacement math uses a 2D value noise function: noise2D(x × waves, y × waves, frequency, amplitude). Each dot position shifts by the noise output, rounded to integer pixels for a crisp field. thebookofshaders.com/11/

  • “SVG is an XML-based vector image format for two-dimensional graphics. It is widely used for procedural patterns and abstract backgrounds due to its infinite scalability and small file size.”
    — Wikipedia — SVG

    SVG — Scalable Vector Graphics format: Patterns can be exported as SVG with individual circle elements at displaced coordinates, preserving the vector nature of the dot field for use in Figma, Illustrator, and web layouts. en.wikipedia.org/wiki/SVG

Frequently Asked Questions

Quick answers about this tool—open a question to read more.