learn GLSL from zero
ToolsCreate with shadersShader MakerFree online shader builderToolkitShader works ready for your siteSketcher LabPaint your landing’s hero with shaders3D StudioThe Three.js editor in your browser
GamesPlay with shadersOnomatoShaderType a word, blow it upThe WatcherAn eye that follows youAetherLiquid glass with an eye insideBloomcoreA word grows a garden of lightPyrokineThrow fire at the wallVoltaicThe pyramid throws lightningSurfSurf a shader ocean

Shader patterns

A pattern repeats one rule across space. You build stripes, grids, checkerboards, spirals and mirrors with fract and polar coordinates, then sign your own.

  1. ShapesRings, squares, diamonds. Each shape is a distance equation.
  2. StripesOne wave. Two colors. Infinite pattern.
  3. The gridOne eye per cell. The grid watches you.
  4. CheckerboardDiamonds on the board. The Overlook floor.
  5. Going polarHAL sees you. Sectors of an iris.
  6. The spiralThe vortex. Shapes falling to center.
  7. Mirrorabs() reflects. One hexagon becomes four.
  8. RadialThe star that radiates. Lobes of fire.
  9. ChladniGeometric vibration. The Chladni plate.
  10. Your patternChladni, star, spiral, rings. All visible.

Next section: Forces in a shader →

close