Texture Generator

Five surfaces, any size, a few hundred bytes.

Five surfaces, any size, a few hundred bytes.

How to use it

  1. Pick a surface. Five presets, each a set of filter values that would otherwise take trial and error.
  2. Set the colours and roughness. Roughness scales the whole preset rather than exposing three separate numbers.
  3. Download SVG or PNG. The SVG is the same size whether you asked for 200 pixels or 4000.

When you would use this

A texture made from an SVG filter has one large advantage over a bitmap: it is described rather than stored. The file holds a filter definition and a rectangle, so a 4000 pixel texture is the same few hundred bytes as a 400 pixel one, and it stays sharp at any zoom because the browser regenerates it rather than scaling it. The difficulty with filter based textures is that the controls are meaningless. Base frequency, octave count and noise type are three numbers with no intuitive relationship to what appears, and finding a combination that looks like paper is most of the work. The presets here are that work already done, and roughness scales the whole preset so one control moves the result in a direction you can predict. One detail makes the difference between a surface and a mess. Turbulence generates independent noise in each colour channel, which produces coloured confetti. Desaturating first and applying the colour afterwards is what makes the result read as a single material. If you want scattered particles rather than a continuous field, the grain generator is the other half of this.

Questions

Why is a 4000 pixel texture the same size as a small one?
Because the noise is described rather than stored. The file holds a filter and a rectangle, and the browser generates the pixels when it draws. That also means it stays sharp at any zoom, where a bitmap texture would blur.
What is the difference between the presets?
Each is a base frequency, an octave count and a noise type. Paper and clouds use smooth fractal noise, canvas and concrete use turbulence, which has visible creases and is what makes them read as a surface rather than a fog. Static is single octave noise at high frequency.
Why is the texture one colour rather than colourful?
Because the noise is desaturated before it is tinted. Generating it in colour gives independent noise per channel, which looks like coloured confetti instead of a material. Colouring afterwards is what makes it read as one surface.