Skip to content
Musterli

Flow Fields

Thousands of lines follow an invisible flow, like wind, water or hair. Export as SVG, image or GIF.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Example motif made with the Flow Fields

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

A flow field is a field of directions that gives every point of the canvas an angle. Let many lines follow it and you get images reminiscent of wind, currents, fur or silk. Musterli computes the field from noise or from swirls and can keep a minimum distance, so the lines never clump together.

How it works

Pick the field, its scale and turbulence, then the start points, line spacing and length. Stroke shape, line width and opacity set the character, and the colors come from the palette, the direction or the position. Press the space bar for a new variation. Export as SVG, PNG, JPG, WebP or as a GIF with travelling strokes.

Try the Flow Fields now

FAQ

What is the difference between noise and swirl?
With noise, the lines roughly follow a main direction and stray from it depending on the turbulence. The swirl field derives its directions from noise so that lines circle around and never converge in a single point.
What is the minimum distance for?
A line stops as soon as it gets too close to another one, so the lines spread evenly across the canvas. At 0 they may overlap, which gives soft, hair-like textures at a low opacity.
How large is the SVG file?
With the default settings usually below 300 KB. Musterli simplifies every line and rounds coordinates. The number of lines, steps and points is capped, so the file stays below about 1.5 MB and the preview stays responsive.
What does the GIF animation look like?
With the motion source the lines turn into strokes that travel along the field, in a seamless loop. Alternatively the frames show new variations or cycle through the colors.

Related generators

All generators in Backgrounds