Flield

A browser-based generator for seamless looping backgrounds. It builds three-color pixel art, a background plus two artwork layers, from seeded flow fields and symmetry. Then it sets that moving in a cycle that runs back into its first frame with no cut. The name is a contraction of "flow field," the mechanic it runs on.

Live demo

https://flield.com/

Screenshot

Examples

Six exported GIFs, one per motion. Each is a single 3-second cycle at half the app's own frame rate, to keep the files small. Every setting and both seeds hold, and only the phase moves. The last frame runs back into the first with no cut.

Purpose

Built to produce backgrounds and placeholder graphics without reaching for stock footage, an animator, or a design tool every time. Swap in a brand color palette, set a motion, and export a loop for a hero section or a hover state. Stills work the same way without the motion: seed a batch of variations and export the one that fits.

generator.js is independent of the UI, so the noise field, symmetry, and grid logic can be reused elsewhere.

The guide walks through every control with the icon it carries in the app, and plays an example of each motion. The same walkthrough is built into the app, behind the ? button.

Features

Generating

• A freshly randomized composition on every page load
• Two independent layers, each with its own seed, color, density, and directional flow field
• Six textures per layer, all read from one field: Streaks, Nebula, Marble, Contours, Streamlines, and Weave
• Eight symmetry modes, from 4-way mirror to 8-way kaleidoscope
• Shape masks (circle, diamond, vignette and its inverse, corner or side vignette, stripes), dithered along the edge rather than cut off
• Readable color by construction: layers held 35 degrees of hue apart, and 20 lightness points off the background
• A Tile preset for a square canvas that repeats with no visible seam

Steering a result

• Per-field locks hold what you like steady while the rest rerolls
• Palette and density ranges bound how far a reroll can wander
• Auto-randomize on an interval, from one second to sixteen
• Undo walks back through recent passes, and never evicts the composition you started from
• The five actions that can't be walked back arm on a one-second hold, not a press

Motion

• Loop, Drift, Wind, Pulse, Ripple, or Tide move a composition instead of replacing it, cycling back with no cut
• Plays on the canvas the moment you pick one, which is exactly what a GIF records
• Separate sliders for how fast it moves and how often it rerolls, both from one second to sixteen
• Depth scales how far a motion goes, and Direction runs it backwards, so Drift and Wind can travel against the flow
• Collide makes the layers push on each other under any motion, and each layer can run a motion of its own

Exporting and sharing

• PNG, SVG, or animated GIF, capped at 240 frames so a long export trades smoothness rather than size
• An SVG carries a link back to its own composition, so a file found later reopens in the editor
• Copy Link packs the whole composition, locks and motion included, into a URL of about a hundred characters
• Three browser save slots, each showing its three colors and when it was saved

Interface

• On a phone, a bar within thumb reach and a sheet that stops short of the artwork, so a value can be judged against the result
• A thirteen-step tutorial with a live example at every step
• Keyboard shortcuts for the exploration loop: R, Space, Cmd/Ctrl+Z
• Dark by default, light on a toggle, remembered across visits
• A favicon regenerated on each load in the same three colors as the canvas
• Fully offline: every dependency vendored, no CDN, no network needed

Further reading

Three explainers on how this works, each running the real generator live rather than showing a screenshot of it:

• What is a flow field?, on steering noise into directional streaks instead of static, and why the field biases density rather than gating it.
• How to make a seamless tiling background, on why a 4-way mirror guarantees a tile repeats with no seam, and what breaks it.
• How to make a looping animated background, on the six motions, why they return to their first frame exactly, and which file format a hero background actually wants.

Running locally

Flield is plain HTML, CSS, and JavaScript. No build step, no package manager.

1. Clone the repository
2. Serve the folder with any static file server, for example: python3 -m http.server 8080
3. Open http://localhost:8080 in a browser

The guide is served alongside it at http://localhost:8080/guide/.

How it works

Each layer's shape comes from a seeded value noise field, a small Perlin-style implementation in generator.js, rotated and stretched into a directional flow rather than isolated static.

That field biases each cell's fill probability instead of switching cells on or off. The result is smooth density gradients across the canvas rather than a hard scatter.

Symmetry applies last, as a mirror, rotation, or translation pass over the finished grid. A shape mask, when set, constrains or fades the result with a seeded dither along the transition. The edge then reads as part of the texture instead of a clipped shape.

Grids are flat typed arrays, the field is cached between renders that don't change it, and the canvas is painted once at cell resolution and scaled up. A full-resolution render stays well under a frame at typical sizes.

Credits

Flield is dependency-free apart from one vendored library:

• gif.js by Johan Nordberg, used for the animated GIF export (vendor/gif/). MIT licensed, see vendor/gif/LICENSE.

No other code is borrowed, but two public-domain algorithms in generator.js are built on published work rather than invented here:

• The flow field's noise (makePerlin) is Ken Perlin's gradient noise, using the fade curve from his 2002 SIGGRAPH paper, "Improved Noise reference implementation."
• The seeded PRNG (mulberry32) is Tommy Ettinger's public-domain generator of the same name.

Contributing

Bug reports, feature suggestions, and small fixes are welcome. See CONTRIBUTING.md for how to get started, and CODE_OF_CONDUCT.md for community expectations.

License

The code is under the PolyForm Noncommercial License 1.0.0: free to use, modify, and share for any noncommercial purpose. Building it into a paid product or service needs a separate commercial license, so open a GitHub issue to ask.

The images you make with it are yours. Use them anywhere, commercially included, with no attribution required. The license covers this repository's source code, not the artwork the tool produces.