Fish Scale Grid
What this grid is
Fish Scale Grid is a repeating scallop-style pattern built from full curved scales arranged in staggered rows. Each row uses a consistent horizontal phase, so the generator creates the exact visible number of scales you request instead of cropping an infinite tiling.
The result is a clean SVG pattern that works well for decorative backgrounds, packaging, textiles, mermaid themes, and ornamental overlays.
Key parameters
- Columns / Rows — The exact visible count of full scales across and down.
- Scale Width (px) — The horizontal size of each scale.
- Arc Height (px) — Controls how shallow or tall each scale feels.
- Overlap (%) — Controls how deeply rows interlock.
- Horizontal Offset (%) — Shifts every other row horizontally. The classic fish-scale look uses 50%.
- Rotation (deg) — Rotates the full composition for diagonal or more ornamental layouts.
- Trim Side Overhang — Cuts away the unsupported hanging shoulders at the far left and right for a cleaner edge.
- Line Width / Opacity / Color — Controls the outline styling.
- Fill Opacity / Fill Color — Turns the pattern from pure outline into filled scallops.
Unique highlights
- Exact count-based generation: no extra wrap rows, no clipped edge fragments, no stray seam tips.
- Optional side-overhang trim for cleaner left and right boundaries when you want a more finished panel-like edge.
- Arc Height and Overlap are separated, so you can shape the scale itself and the layering rhythm independently.
- Works as outline-only or filled pattern, while staying clean and editable in SVG.
Typical use cases
- Mermaid, marine, and fantasy-style backgrounds.
- Surface pattern exploration for wallpaper, textiles, or packaging.
- Decorative structure behind labels, badges, or editorial typography.
- Scallop-like ornamental fills inside custom clipped shapes.
Tips
- Start with Horizontal Offset = 50% for the most classic fish-scale arrangement.
- Turn on Trim Side Overhang when you want the outer unsupported shoulders removed at the left and right edges.
- Lower Arc Height for flatter scallops; raise it for fuller, more rounded scales.
- Increase Overlap if you want stronger layering and denser vertical rhythm.
- Use Fill Opacity = 0 for a clean line pattern; add a subtle fill for a softer decorative look.
FAQ
Why does this version avoid edge fragments?
It generates the exact requested rows and columns of full scales first, then sizes the output from that geometry. It does not rely on infinite tiling plus clipping.
What controls the “fish scale” character most strongly?
Arc Height changes the curve shape, Overlap changes the stacking rhythm, and Horizontal Offset changes how the staggered rows relate to each other.
Why would I enable Trim Side Overhang?
It removes the left/right hanging shoulders that do not participate in the main staggered interlock, giving the pattern cleaner side edges.