Aller au contenu

sGrid Node

By Kriss Norde

sGrid replicates a vector shape in a 2D grid - rows × columns. Unlike sDuplicate (copies in a line with a cumulative transform), sGrid creates a regular 2D matrix with Grid Cells X/Y. Ideal for tiled patterns, vector pixel art, repeating geometric backgrounds, game UI (chessboards, inventories).

Overview

sGrid takes an input shape and replicates it as a 2D matrix (X columns × Y rows). Each copy is identical to the original, spread evenly with an adjustable Offset.

Typical use cases: checkered patterns, honeycombs (with a 6-sided sNGon), arrays for mosaics, game UI inventory grids.

Where to find this node

  • Effects Library: Tools > Shape > sGrid
  • Quick add: right-click in the Node Editor → Add Tool > Shape > sGrid

sGrid vs sDuplicate

sDuplicate
Copies in a linear sequence with a cumulative transform (position + rotation + scale per copy). More flexible, less structured.
sGrid
Copies in a regular 2D matrix. All identical (no cumulative transform), just spread over X × Y cells. Stricter, more predictable.

Rule: a line/circle/spiral of copies → sDuplicate. A regular matrix / checkerboard / tiled pattern → sGrid.

Inputs

  • Input1 (required) - the output of another shape node. The shape to replicate in a grid.

Setup

Honeycomb pattern:
sNGon (Sides 6, Angle 30°) → sGrid (Cells X=8, Y=6) → sRender → Merge

Inventory grid (5×4 slots):
sRectangle (Corner Radius 0.2) → sGrid (Cells X=5, Y=4, Offset X=0.15, Y=0.2)
                                → sRender → Merge

Checkerboard:
sRectangle (white) → sGrid (Cells 8×8) → sRender → Merge
                                                        ↑
                                                 (alternating via a mask)

Dot pattern:
small sEllipse → sGrid (Cells 20×15, small Offset) → sRender → Merge

Controls tab

Grid Cells X
Number of columns in the grid.
Grid Cells Y
Number of rows in the grid.
X Offset
Horizontal spacing between copies. 0.0 = all the copies stacked in the same place. 1.0 = copies spread across the whole width of the frame.
Y Offset
Vertical spacing.

Use cases

  • Honeycomb pattern - a hexagonal sNGon + sGrid with the right offsets = a perfect tiled hexagonal pattern. A classic for tech/sci-fi backgrounds.
  • Game UI inventory grid - a rounded sRectangle + sGrid = 4×4, 5×6 inventory slots, etc.
  • Checkerboard / chessboard - sRectangle + an 8×8 sGrid = a checkerboard. Combine it with alternating colors through sBoolean or masks.
  • Pixel art background - a very small sRectangle + sGrid with high Cells (40×25) = a pixel art pattern for a background motif.
  • Dot pattern - a small sEllipse + sGrid = a polka dot motif. Retro/fashion design.
  • Multiple stars (★ ★ ★ ★) - sStar + sGrid for a row or grid of stars. A quick alternative to manual sMerge nodes.
  • Heat map / data visualization - sRectangle + sGrid = a grid of uniform cells you can animate to visualize data.

Tips

  • Offset ≈ 1/Cells for full coverage - Cells X = 5, Offset X = 0.2 (= 1/5) = the cells fill the whole width without overlapping.
  • Cells 1×N = a vertical line, N×1 = a horizontal line. sDuplicate works better for this case.
  • Performance: watch X × Y - 20×20 = 400 copies, 50×50 = 2500. Beyond a few hundred, the render slows down.
  • Offset 0 for stacking = all the copies are stacked at the center. A special case, used for an accumulation effect or to test without spacing.
  • Test with small values first (Cells 3×3), then increase gradually. Avoids surprise slowdowns.
  • Combine sGrid with sJitter = a grid with random variations (size, rotation, color per cell). More organic.
  • For non-uniform grids (variable sizes or positions), use several shape nodes + sMerge manually. sGrid only handles uniform grids.