Truchet
Quarter-circle arc tiles that connect to form organic, maze-like flowing curves
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorA | color | #000000 | Background color between the arcs |
| colorB | color | #ffffff | Arc line color |
| cells | range | 10 | Number of tiles across the shortest canvas edge |
| thickness | range | 2 | Thickness of the arc lines |
| rotation | range | 0 | Rotation of the tiling in degrees |
| softness | range | 0 | Softness of the arc edges (0 = crisp, 1 = very soft) |
| seed | range | 0 | Random seed — changes which tiles flip, producing a different maze pattern |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for color interpolation |
Usage
vue
<Shader>
<Truchet />
</Shader>