fffuel
fffuel (fffuel.co) is a collection of ~40 free, browser-based SVG generator
and color tools by a single designer — one page per tool, each a parametric
generator you tweak and export. There is no npm package, no API, no CLI, and
no accounts. Like haikei, it is human-in-the-loop: Claude Code picks the tool,
hands the human a URL and settings, waits for the exported SVG, then owns the
integration. Tools export via save (downloads .svg) and copy SVG
(markup to clipboard); companion utilities convert to PNG (rrrasterize) and
to base64 CSS (eeencode).
License (verified from fffuel.co/license): free for personal and
commercial projects, no attribution required. You cannot sublicense, resell,
share, or redistribute the images themselves. Provided as-is, no warranty.
fffuel vs haikei — the boundary
The haikei skill owns layered waves, blob scenes, blurry gradients,
low-poly grids, peaks/steps, and scatter fields — and it owns the deep
integration reference. fffuel owns what haikei lacks:
| Need |
Use |
| Layered waves, hero dividers, blob scenes, low-poly, scatter |
haikei (see its references/generators.md) |
| Noise/grain texture, film grain over a surface |
fffuel nnnoise, gggrain |
| Fluid / mesh / holographic / watercolor gradient washes |
fffuel ffflux, uuunion, hhholographic, wwwatercolor, aaabstract |
| Glow, neon, iridescent shapes |
fffuel nnneon |
| Isometric, grid, and repeating patterns |
fffuel mmmotif, ooorganize, rrrepeat, rrreplicate, iiisometric |
| Ripples, spirals, chaos lines, confetti, sparkle bursts |
fffuel uuundulate, ssspiral, cccoil, ccchaos, oooscillate, bbburst, tttwinkle, ffflurry |
| Single shapes: blobs, arrows, clouds, stars, hearts, lines |
fffuel ssshape, pppointed, cccloud, ssstar, lllove, llline |
| Simple waves when the rest of the page is already fffuel-flavored |
fffuel sssurf (otherwise prefer haikei's wave generators) |
Full catalog with direct URLs and per-tool configuration notes:
references/catalog.md.
Workflow
- Check that a generated asset is warranted at all. A CSS gradient or a
Tailwind class is free; haikei's "When not to use" applies verbatim here:
no decorative backgrounds on dense work surfaces, nothing that must respond
to data, no manual browser trip per variant.
- Pick the tool from
references/catalog.md; every tool lives at
https://fffuel.co/<slug>/.
- Hand the human the URL plus settings: brand hex codes to paste, the
two or three sliders that matter, and whether to hit save or copy SVG.
- Stop and wait. Name the expected file and destination
(e.g.
public/textures/noise.svg). Never write imports for an asset that
doesn't exist.
- Integrate via haikei's playbook. SVGO, responsive
viewBox/preserveAspectRatio, delivery-method tradeoffs, dark mode,
aria-hidden + pointer-events-none are identical for fffuel exports —
follow .claude/skills/haikei/references/integration.md and do not
re-derive it. The fffuel-specific deltas are below.
fffuel-specific integration gotchas
- Filter-based outputs (
nnnoise, gggrain) are <filter> + <rect>,
not paths. They stay tiny (~1 KB) at any visual size — do not rasterize
them to PNG "for performance"; the SVG is the performant version. GPU cost,
not bytes, is the budget: one full-viewport feTurbulence layer is fine,
five stacked are not.
- ID collisions. fffuel exports reference internal ids
(
filter, gradient defs). Inline two exports on one page and the second's
url(#...) references resolve to the first's defs — recolored or broken
output with no console error. Namespace ids per asset when inlining, or
deliver via <img>/CSS background-image where documents are isolated.
Note SVGO's cleanupIds can shorten ids into new collisions across
separately-optimized files — set cleanupIds: false for anything inlined.
- Textures are designed to tile.
nnnoise/pattern outputs assume CSS
background-repeat: repeat (the default) — size the SVG small and tile it;
don't stretch one texture tile over a hero.
- Dark-mode grain: noise/grain over a near-black surface (this repo's
ink/panel) should run at low opacity (3–8%) via a separate absolutely-
positioned layer with mix-blend-mode: overlay or soft-light, so the
texture rides the surface color instead of fighting it.
- CSS/JSX export honesty: tools export SVG markup, and several tool pages
document CSS
background-image usage (use eeencode for a data-URI);
none were verified to emit JSX. Pasting copy SVG output into TSX requires
the usual attribute fixes (fill-opacity → fillOpacity, class →
className, strip xmlns:xlink).
When not to use
Everything in haikei's "When not to use" list, plus: don't reach for fffuel's
one-shot image collections (dddepth, tttexture) when the design system
already has a texture language — consistency beats a new asset; and don't use
ccclaymoji/dddraw output as UI iconography (see ui-ux-pro-max on icon
discipline — real icon sets, not decorative one-offs). For choosing the
overall direction a texture serves, defer to frontend-design /
taste-skill; fffuel is an asset source, not a design direction.
1---2name: fffuel3description: Route design needs to the right generator on fffuel (fffuel.co) — a large collection of free browser-based SVG generator and color tools (nnnoise, gggrain, ffflux, uuunion, sssurf, ooorganize, mmmotif, nnneon, hhholographic, bbblurry, ssshape, and ~30 more) — each mapped to its use case with a direct URL and what to tell the human to configure, plus the fffuel-specific integration gotchas (SVG filter outputs, ID collisions, tiling textures). Use this whenever a design needs noise or grain texture, a grainy/fluid/mesh gradient, holographic or iridescent backgrounds, neon glow shapes, isometric or grid patterns, repeating line/ripple/spiral/confetti patterns, arrows, blobs, or any generated SVG asset beyond what haikei covers; whenever someone says a surface needs "texture", "grain", "glow", or "a pattern"; whenever a fffuel.co URL or a downloaded fffuel SVG appears and needs optimizing, tiling, theming, or wiring into React/Next.js; and whenever choosing between fffuel and haikei for a generated background.4---56# fffuel78fffuel (fffuel.co) is a **collection of ~40 free, browser-based SVG generator9and color tools** by a single designer — one page per tool, each a parametric10generator you tweak and export. There is no npm package, no API, no CLI, and11no accounts. Like haikei, it is human-in-the-loop: Claude Code picks the tool,12hands the human a URL and settings, waits for the exported SVG, then owns the13integration. Tools export via **save** (downloads `.svg`) and **copy SVG**14(markup to clipboard); companion utilities convert to PNG (`rrrasterize`) and15to base64 CSS (`eeencode`).1617**License (verified from fffuel.co/license):** free for personal **and18commercial** projects, no attribution required. You cannot sublicense, resell,19share, or redistribute the images themselves. Provided as-is, no warranty.2021## fffuel vs haikei — the boundary2223The **haikei** skill owns layered waves, blob scenes, blurry gradients,24low-poly grids, peaks/steps, and scatter fields — and it owns the deep25integration reference. fffuel owns what haikei lacks:2627| Need | Use |28|---|---|29| Layered waves, hero dividers, blob scenes, low-poly, scatter | **haikei** (see its `references/generators.md`) |30| Noise/grain texture, film grain over a surface | fffuel `nnnoise`, `gggrain` |31| Fluid / mesh / holographic / watercolor gradient washes | fffuel `ffflux`, `uuunion`, `hhholographic`, `wwwatercolor`, `aaabstract` |32| Glow, neon, iridescent shapes | fffuel `nnneon` |33| Isometric, grid, and repeating patterns | fffuel `mmmotif`, `ooorganize`, `rrrepeat`, `rrreplicate`, `iiisometric` |34| Ripples, spirals, chaos lines, confetti, sparkle bursts | fffuel `uuundulate`, `ssspiral`, `cccoil`, `ccchaos`, `oooscillate`, `bbburst`, `tttwinkle`, `ffflurry` |35| Single shapes: blobs, arrows, clouds, stars, hearts, lines | fffuel `ssshape`, `pppointed`, `cccloud`, `ssstar`, `lllove`, `llline` |36| Simple waves when the rest of the page is already fffuel-flavored | fffuel `sssurf` (otherwise prefer haikei's wave generators) |3738Full catalog with direct URLs and per-tool configuration notes:39`references/catalog.md`.4041## Workflow42431. **Check that a generated asset is warranted at all.** A CSS gradient or a44 Tailwind class is free; haikei's "When not to use" applies verbatim here:45 no decorative backgrounds on dense work surfaces, nothing that must respond46 to data, no manual browser trip per variant.472. **Pick the tool** from `references/catalog.md`; every tool lives at48 `https://fffuel.co/<slug>/`.493. **Hand the human the URL plus settings**: brand hex codes to paste, the50 two or three sliders that matter, and whether to hit *save* or *copy SVG*.514. **Stop and wait.** Name the expected file and destination52 (e.g. `public/textures/noise.svg`). Never write imports for an asset that53 doesn't exist.545. **Integrate via haikei's playbook.** SVGO, responsive55 `viewBox`/`preserveAspectRatio`, delivery-method tradeoffs, dark mode,56 `aria-hidden` + `pointer-events-none` are identical for fffuel exports —57 follow `.claude/skills/haikei/references/integration.md` and do not58 re-derive it. The fffuel-specific deltas are below.5960## fffuel-specific integration gotchas6162- **Filter-based outputs (`nnnoise`, `gggrain`) are `<filter>` + `<rect>`,63 not paths.** They stay tiny (~1 KB) at any visual size — do not rasterize64 them to PNG "for performance"; the SVG is the performant version. GPU cost,65 not bytes, is the budget: one full-viewport `feTurbulence` layer is fine,66 five stacked are not.67- **ID collisions.** fffuel exports reference internal ids68 (`filter`, gradient defs). Inline two exports on one page and the second's69 `url(#...)` references resolve to the first's defs — recolored or broken70 output with no console error. Namespace ids per asset when inlining, or71 deliver via `<img>`/CSS `background-image` where documents are isolated.72 Note SVGO's `cleanupIds` can shorten ids into *new* collisions across73 separately-optimized files — set `cleanupIds: false` for anything inlined.74- **Textures are designed to tile.** `nnnoise`/pattern outputs assume CSS75 `background-repeat: repeat` (the default) — size the SVG small and tile it;76 don't stretch one texture tile over a hero.77- **Dark-mode grain:** noise/grain over a near-black surface (this repo's78 `ink`/`panel`) should run at low opacity (3–8%) via a separate absolutely-79 positioned layer with `mix-blend-mode: overlay` or `soft-light`, so the80 texture rides the surface color instead of fighting it.81- **CSS/JSX export honesty:** tools export SVG markup, and several tool pages82 document CSS `background-image` usage (use `eeencode` for a data-URI);83 none were verified to emit JSX. Pasting *copy SVG* output into TSX requires84 the usual attribute fixes (`fill-opacity` → `fillOpacity`, `class` →85 `className`, strip `xmlns:xlink`).8687## When not to use8889Everything in haikei's "When not to use" list, plus: don't reach for fffuel's90one-shot image collections (`dddepth`, `tttexture`) when the design system91already has a texture language — consistency beats a new asset; and don't use92`ccclaymoji`/`dddraw` output as UI iconography (see **ui-ux-pro-max** on icon93discipline — real icon sets, not decorative one-offs). For choosing the94overall direction a texture serves, defer to **frontend-design** /95**taste-skill**; fffuel is an asset source, not a design direction.
shashidharbabu