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:
Running locally
Flield is plain HTML, CSS, and JavaScript. No build step, no package manager.
- Clone the repository
- Serve the folder with any static file server, for example:
python3 -m http.server 8080
- 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:
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.
