How to Make Flow Field Line Art with Flow Lines

What a vector field is

Flow field art starts with a rule that gives every point on the page a direction. Flow Lines writes that rule as two formulas. X Formula is the horizontal push at a point and Y Formula the vertical push, both in terms of the point’s coordinates x and y. Together they make a vector field F(x, y).

A streamline is the path a particle would trace if it always moved in the field’s direction. The tool starts streamlines from many points and stops each one when it gets too close to another, so the lines stay evenly spaced instead of bunching up. The output is a set of open polylines, which is exactly what a pen plotter wants: one continuous stroke per path and nothing to fill.

The page covers the square from −5 to 5 in both directions, mapped onto 800 × 800 SVG units. Formulas are evaluated in those maths coordinates, so sin(x) completes about one and a half waves across the page.

Trace your first field

1. Open Flow Lines. The default field is cos((cos(y) - x * y)) for X and x for Y.
2. Edit either formula and the streamlines retrace as you type. Try 1 for X and 0 for Y to see plain horizontal lines, then bring the original formulas back with the reset buttons.
3. Press 🎲 Randomize for a new pair of formulas built from an expression grammar. The arrows next to it step back and forward through your history.
4. Click Download SVG. Every streamline becomes one <polyline>, and the settings are written into the page URL so Copy Link reproduces the design.

Open this design in Flow Lines · settings: defaults

Three worked examples

Cells: sine and cosine

sin(y) for X and cos(x) for Y gives a field that circulates around a grid of centres. Every streamline curls into a closed cell.

Open this design in Flow Lines · settings: X sin(y) · Y cos(x)

Saddle: mixing a polynomial with a wave

y-x*x/4 for X and sin(x) for Y combines a parabola with a wave. Streamlines flow around two eyes near the top and pass through a saddle in the middle, which gives the drawing an obvious focal point.

Open this design in Flow Lines · settings: X y-x*x/4 · Y sin(x)

Your own field

Good fields mix a slow term with a fast one. Start from x and y, add a sin or cos of the other coordinate, and scale the argument (sin(2*y) doubles the number of waves). A field that only rotates, such as y and -x, draws perfect circles. A field that only pushes, such as 1 and 0.5, draws parallel lines. The interesting drawings sit somewhere between.

Eight favourite streamline plots

These are Flow Lines drawings I kept from the tool’s first years, exported at 600 × 600 units and plotted since. That early version did not write its formulas into the file, so unlike the Rad Lines favourites they cannot be reopened with a link. They are here as finished, plottable SVGs, and as a picture of what the tool can do once you move past the defaults. The current version records every setting, including the seed, in the SVG’s <title> element, so anything you export today can be rebuilt later.

Some patterns worth noticing. Vortices and eyes come from a rotational term, such as y in the X formula paired with -x in the Y formula, or a sin of the other coordinate. Repeating cells like the diamonds come from products such as sin(x)*cos(y). Line count is your plot-time budget: the nested rings have almost seven times as many pen strokes as the vortices. Open a favourite in Plot Preview to see it at your paper size with your pen before committing to it.

Density, detail and file size

Four numeric settings decide how many lines are drawn and how many points each one carries. The comparison below keeps the default field and changes one value at a time.

• Separation Distance is the gap between the starting points of neighbouring streamlines. Halving it from 0.2 to 0.1 roughly doubles the line count and the plotting time.
• Stop Distance (dTest) is how close a streamline may come to an existing one before it stops. Keep it well below the separation distance. Raising it shortens lines and opens gaps.
• Time Step is the integration step. Smaller steps follow tight curves more faithfully but add points; 0.2 is visibly coarser around the vortex.
• Simplification removes points that do not change the shape by more than the tolerance in page pixels. A value of 2 cut the default design from about 6,300 points to 1,900 with no visible change at plot size.

The default drawing downloads at about 88 KB. For a plotter, line count matters more than point count, because each streamline costs a pen lift. Separation Distance is the setting that decides plot time.

Stroke and background

Stroke Width and Stroke Color only change how the file looks on screen. The plotter follows the centreline of each polyline with whatever pen is loaded, so a 0.3 mm technical pen and a 1 mm brush pen draw the same paths and get very different results. Use the stroke width to judge spacing, then check at size in Plot Preview.

Background adds a filled rectangle behind the lines. Most plotting software will try to draw or fill it, so leave it off when exporting for a machine. It is handy on screen when you are picking a stroke colour for coloured paper.

Prepare the SVG for plotting

• Open the download in SVG Optimizer. Sort for Plotting reorders the streamlines to reduce pen-up travel between them, and Merge Lines joins lines whose ends touch. The before/after slider confirms the drawing is unchanged.
• Use SVG Effects to hatch areas, warp the field, or layer a second copy in a different colour for a two-pen plot.
• Check the physical size in your plotting software. The file’s viewBox is 800 × 800 units; the page size in millimetres is set when you import it.

Common problems:

• Nothing is drawn. The formulas produced NaN or infinity, for instance 1/x at x = 0. Add a small offset such as 1/(x+0.01).
• Only a few long lines appear. The field is nearly uniform. Add a term that varies with the other coordinate.
• Lines break into short dashes. Stop Distance is too close to Separation Distance. Lower it.
• The file is very large. Raise Simplification before lowering Separation Distance.

The figures on this page are browser exports rasterised for the web; I have not plotted these particular files. For radial designs, see the Rad Lines guide.