Shader Atlas
한국어
▦ Patterns & grids

Weave

직조 패턴

Horizontal and vertical threads interlace in an over-under textile pattern.

Also known as: Weave직물 짜임

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, Weave } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Weave />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, Weave } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Weave/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, Weave } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Weave />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, Weave } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Weave />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'Weave',
    }
  ]
}, { disableTelemetry: true })

Props · Weave

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
colorAX Color#c4c4c4—Horizontal thread color
colorBY Color#4d4d4d—Vertical thread color
cellsCells102 – 40 (step 1)Number of threads across the shortest canvas edge
gapGap0.250 – 0.45 (step 0.01)Gap between threads (0 = no gap, 0.5 = maximum gap)
rotationRotation00 – 360 (step 1)Rotation of the weave pattern in degrees

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Stripes스트라이프

Two alternating stripe colors form a repeating pattern that can move.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Brick Pattern벽돌 패턴

Offset rows of bricks repeat with visible mortar gaps between them.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Checkerboard체커보드

A board of square tiles that alternate between two colors.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Truchet트루셰 타일

Quarter-circle arc tiles connect into flowing, maze-like curves.

Like a basket or woven cloth, horizontal and vertical threads pass over and under one another. Their two colors create a textile-like texture on a flat canvas.

Increase `cells` to place more threads along the shorter edge and make the weave denser. `colorA` and `colorB` color the horizontal and vertical threads; raise `gap` to widen the spaces between them. `rotation` turns the weave direction.

The pattern fills the canvas without an input layer. `gap` defaults to 0.25. If the gaps are too wide, the weave can look disconnected; if the threads are too dense, their crossings may be hard to read. Tune both to the texture you want.

When to use

Use it for cloth or basket-like material backgrounds, craft-inspired cards, or to add texture to a uniform area. Avoid very small placements where the crossings would merge into a blur.

Open as page ↗