Repeating patterns
fract() tiles the whole screen into a grid you can fill once.
One of the most satisfying shader tricks is repetition. The function fract(x) returns just the fractional part of a number — fract(2.7) is 0.7. Multiply your coordinate before taking fract, and the 0-to-1 space repeats: fract(st * 3.0) resets to 0 three times across the screen, giving a 3×3 grid of identical little coordinate spaces. Draw one thing inside that repeated space and you have tiled it everywhere, for free.
This is how tilemaps, checkerboards, brick walls, polka dots and star-fields are made in a shader — draw the cell once, and fract() stamps it across the whole surface.
Your turn: tile a circle into a 3×3 grid. Multiply the coordinate by 3, take fract(), then draw one circle in that repeated space.
Tile a circle into a 3×3 grid.
Compute grid = fract(st * 3.0), then draw a circle: 1.0 - smoothstep(0.30, 0.32, distance(grid, vec2(0.5))).
What does fract(st * 4.0) do to the coordinate space?