Background

Description

The background feature allows you to render an SVG pattern underneath all nodes and connections on the canvas.
It is useful for creating grids, subtle textures, or branded backgrounds that stay fixed while the user interacts with the flow.

To enable a background, place the f-background component inside the f-flow component.
The f-background component is responsible for defining and attaching the SVG pattern that will be used as the canvas background.

Backgrounds can work in three modes:

• rect – built-in rectangular pattern (useful for grid-like backgrounds);
• circle – built-in circular pattern;
• custom – a mode that lets you provide your own SVG pattern, so you can build complex or branded backgrounds (multiple patterns, custom shapes, textures, etc.).

The custom mode is configured via standard SVG <pattern> elements and a custom component.
Detailed instructions and API for creating custom patterns are described in the f-background documentation.

Backgrounds matter more than they seem: they improve spatial orientation, reinforce brand identity, and make dense editor canvases easier to parse.

Example

The example below shows how to:

• wrap f-canvas with f-flow;
• add f-background to enable a background;
• switch between the built-in rect and circle patterns;
• use the new custom mode with a custom background implementation.