Textures

Byte Seamless Textures

20 pixel art tiling surface textures for light interfaces — cool bone with signal teal accents. SVG plus transparent PNG at 1x, 2x and 4x.

  • ui
  • svg
  • transparent png
  • texture
  • seamless
  • tiling
  • material
  • pixel
  • pixel art
  • pixel art
  • light ui
  • puzzle
  • management
Sheet showing 20 pixel art tiling surface textures from the Byte family, arranged on a transparency checkerboard with their pixel sizes printed underneath
1600×3907 previewtransparency shown as checkerboard

About this pack

Byte Seamless Textures is a set of 20 tiling surface textures drawn in the pixel art style, where every corner is a staircase of whole pixels and nothing is anti-aliased. It contains brick, stone and tile surfaces, wood, fabric and metal, dirt, grass and plaster and a matching height map for every surface.

These are vector-drawn surfaces, not photographic PBR scans, and it is worth being plain about that: they will not pass for a photoreal material under a physical camera. What they are good for is stylised work, 2D backgrounds, UI fills and anything that has to stay readable when it is scaled or recoloured — cases where a photo scan is the wrong tool anyway.

The outline steps in 4px units and shading is a Bayer dither rather than a gradient, so the set survives being scaled by an integer factor — which is the only way pixel art can be scaled without turning to mush.

Inside that style this is the Byte reading of it: a light interface on a cool bone palette with signal teal accents, built around a single bordered frame, fully rounded pill buttons at 112x36, banded bars divided into 10 segments, and outlined icons on a 24px grid. Those measurements are why two families can share an art style without being interchangeable: the style decides how an edge is drawn, the numbers decide what the interface is for.

Every motif that crosses an edge is drawn again on the opposite edge, which is the whole difficulty of a tiling texture and the thing that is easy to get subtly wrong. Each surface ships with a greyscale height companion so a shader can derive a normal map at whatever strength the scene wants, rather than baking one in at a strength that suits nothing.

Every sprite ships as an editable SVG and as transparent PNG at 1x, 2x and 4x, so you can drop the PNGs straight into an engine or open the vector and change a colour. Built to the same measurements as the rest of the Byte family, which means this kit and the Byte panel kit line up without either being resized. A good fit for pixel-art games.

Download

Direct link · no sign-up · no wait page
Download ZIP308 kB

Complete set — SVG sources, PNG exports at 1x/2x/4x, licence and readme

Files included in this pack
FileFormatSizeDownload
Complete set — SVG sources, PNG exports at 1x/2x/4x, licence and readmeZIP308 kBGet →
Brick wall, seamless tile, pixel art, editable SVGSVG56 kBGet →

How to use it

  1. Set the material to repeat in both axes at the source size; the tile is authored square so a non-uniform scale is what introduces a seam, not the art.
  2. Feed the -height file into a normal-from-height node rather than using it as a normal map directly — it is a greyscale elevation, not an RGB normal.
  3. Recolour by tinting rather than by editing the SVG if you need a variant; the tones are chosen to survive a hue shift without the mortar or grain disappearing.

License

Creative Commons Attribution 4.0 — Free for commercial use. Credit required. Full terms · What this means in practice

Copy-paste credit line
"Byte Seamless Textures" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/3d/textures/byte-textures