Interlocking Wavy Image Grid

This is an Interlocking Wavy Image Grid. It applies procedural scalloped edges to raster images and shifts them into a tight, puzzle-like masonry formation. Its function is to break rigid, rectangular bounds in visual galleries, converting standard blocks into an organic, cohesive texture.

Specs

• Weight: < 1 KB. Pure CSS and HTML. Zero dependencies.
• Performance: High. The masking is resolved natively by the browser’s graphics engine.
• Theming / Customization: The entire shape and offset math is bound to a single CSS variable (--s: 12px), which dictates the wave amplitude.
• Responsiveness: Static by default. The sizes and translate offsets are rigidly calculated. [!] Requires custom media queries to scale the --s variable or adjust the grid structure for mobile viewports.
• Graceful Degradation: Relies on modern CSS math (sqrt()). In unsupported browsers, the masking will fail, leaving standard rectangular images with visible overlapping backgrounds.

Anatomy

• HTML: A flat .container housing 9 standard <img> tags. No extra wrapper divs or SVGs are used for the masking.
• CSS: The engine. display: grid builds the foundational 3x3 layout. The mask property composites multiple radial-gradient and conic-gradient layers to cut out the scalloped edges. Independent translate and place-self properties physically push the images out of their rigid grid cells to interlock.

Logic

The architectural core is the use of the CSS sqrt() function inside the mask gradients to calculate precise geometric intersections.

img {
  --s: 12px;
  mask: 
    radial-gradient(calc(sqrt(2)*var(--s)),#000 calc(100% - 1px),#0000),
    conic-gradient(#000 0 0) content-box,
    radial-gradient(calc(sqrt(2)*var(--s)),#0000 100%,#000 calc(100% + 1px)) 
     var(--s) var(--s) padding-box;
  mask-size: calc(var(--s)*4) calc(var(--s)*4);
}

Instead of using an external SVG mask, the CSS draws repeating geometric patterns. The sqrt(2) multiplier computes the exact diagonal distance required for the radial gradients to perfectly meet at their edges. This ensures the positive and negative spaces of the waves tile seamlessly across the mask-size boundary, carving perfect scallops into the image without anti-aliasing artifacts.

Feel

Tactile and cohesive. The images do not feel like separate files placed next to each other; they feel like pieces of a physical jigsaw puzzle stamped out by the same mechanical die. The mathematically precise waves create a satisfying, interlocking rhythm that forces the eye to view the gallery as a single, unified object.