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 sets it 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.
Six exported GIFs, one per motion, each a single 3-second cycle at half the app's own frame rate to keep the files small. Every setting and both seeds hold; only the phase moves, and the last frame runs back into the first with no cut.
| Loop | Drift |
|---|---|
 |
 |
| Each layer's flow field breathes around a small closed path, the two turning opposite ways, so they sway against each other and come back where they started. | Orange bands slide one way and a cream nebula behind them slides the other, each along its own flow direction, and both wrap into themselves so they never jump. |
| Wind | Pulse |
 |
 |
| The broad streaks hold their ground while a much broader gust bends them, rising and settling once across the cycle, and their fine detail streams through along the flow. | Density swings on one sine wave, Layer B at 70% of the depth, so the contour lines swell and thin in weight and the streaks behind them breathe, without moving. |
| Ripple | Tide |
 |
 |
| Rain on a marble: seven drops land at their own moments, and each ring bends and swells what it crosses, thins as it spreads, and adds where it meets another, while the field beneath never moves. | Each layer's field is pushed along the other's ridges, rising and settling once per cycle, so the strands are swept along the nebula behind them and the nebula bends around the strands. |
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: the ? button opens it, at the bottom of the sidebar or the end of the settings panel on a phone.
- 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 reading one field: Streaks, Nebula and Marble bias how likely a cell is to fill, Contours draws the field's level lines, and Streamlines and Weave trace particles along it
- 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
- 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
- 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, with the reroll stepping in doublings
- 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
- 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
- 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 as it changes
- 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
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.
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:8080in a browser
The guide is served alongside it at http://localhost:8080/guide/.
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, which is what produces 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, so the edge 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.
Flield is otherwise dependency-free; the one vendored third-party library is:
- 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.
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.
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.