Simplex Truchet Weave Shaders

Complex toroidal weave patterns using simplex grid tessellation with random rendering order. Advanced mathematical pattern generation for sophisticated geometric visualizations.

React

WebGL

Building complex weave patterns?

Join our Discord community for help from other developers working with advanced simplex grid algorithms.

Look, we've all tried to build weave patterns. You either end up with basic grid overlays that look nothing like proper mathematical weaving or JavaScript calculations that can't handle complex toroidal segments smoothly. This React component uses advanced simplex grid tessellation with random toroidal rendering that actually runs at 60fps without melting your CPU.

Sophisticated simplex weave animation

Complex toroidal segments with mathematical simplex grid tessellation and random rendering order:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface SimplexTruchetWeaveShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  scale?: number;  shape?: number;  showWeave?: boolean;  showGrid?: boolean;}const fragmentShader = `#extension GL_OES_standard_derivatives : enablemat2 rot2(in float a) {    float c = cos(a), s = sin(a);    return mat2(c, -s, s, c);}vec2 hash22(vec2 p) {    float n = sin(dot(p, vec2(1, 113)));    p = fract(vec2(2097152, 262144) * n);    return sin(p * 6.283 + iTime * u_speed * 2.);}float hash21(vec2 p) {    float n = dot(p, vec2(127.183, 157.927));    n = fract(sin(n) * 43758.5453);    return n;}float distLine(vec2 a, vec2 b) {    b = a - b;    float h = clamp(dot(a, b) / dot(b, b), 0., 1.);    return length(a - b * h);}float dist(vec2 p) {    if (u_shape == 0.) {        return length(p);    } else if (u_shape == 1.) {        p *= rot2(3.14159 / 12.);        p = abs(p);        return max(p.y * .8660254 + p.x * .5, p.x);    } else {        p *= rot2(3.14159 / 12.);        p = abs(p);        vec2 p2 = p * .8660254 + p.yx * .5;        return max(max(p2.x, p2.y), max(p.x, p.y));    }}vec3 simplexWeave(vec2 p) {    vec2 oP = p;    float gSc = u_scale;    p *= gSc;    vec2 s = floor(p + (p.x + p.y) * .36602540378);    p -= s - (s.x + s.y) * .211324865;    float i = p.x < p.y ? 1. : 0.;    vec2 ioffs = vec2(1. - i, i);    vec2 p1 = p - ioffs + .2113248654, p2 = p - .577350269;    vec3 d = max(.5 - vec3(dot(p, p), dot(p1, p1), dot(p2, p2)), 0.);    vec3 w = vec3(dot(hash22(s), p), dot(hash22((s + ioffs)), p1), dot(hash22(s + 1.), p2));    float noise = clamp(0.5 + dot(w, d * d * d) * 12., 0., 1.);    vec3 h = vec3(hash21(s), hash21((s + ioffs)), hash21(s + 1.));    if (u_showWeave < 0.5) {        h = floor(h * 15.999) / 15.;        if (h.x == h.y) h.y += .0001;        if (h.x == h.z) h.z += .0001;        if (h.y == h.z) h.z += .0001;    }    vec3 a = vec3(atan(p.y, p.x), atan(p1.y, p1.x), atan(p2.y, p2.x));    float tw = .25;    if (u_shape == 1.) {        tw = .19;    }    float mid = dist((p2 - p)) * .5;    vec3 cir = vec3(dist(p), dist(p1), dist(p2));    vec3 tor = abs(cir - mid) - tw;    tor /= gSc;    cir /= gSc;    if (u_showWeave < 0.5) {        if (h.x < h.y && h.x < h.z) {            if (h.z < h.y) {                tor = tor.xzy;                h = h.xzy;                a = a.xzy;            } else {                tor = tor.xyz;                h = h.xyz;                a = a.xyz;            }        } else if (h.y < h.z && h.y < h.x) {            if (h.z < h.x) {                tor = tor.yzx;                h = h.yzx;                a = a.yzx;            } else {                tor = tor.yxz;                h = h.yxz;                a = a.yxz;            }        } else {            if (h.y < h.x) {                tor = tor.zyx;                h = h.zyx;                a = a.zyx;            } else {                tor = tor.zxy;                h = h.zxy;                a = a.zxy;            }        }    } else {        float dh = hash21((s + s + ioffs + s + 1.));        if (dh < 1. / 6.) {            tor = tor.xzy;            a = a.xzy;        } else if (dh < 2. / 6.) {            tor = tor.yxz;            a = a.yxz;        } else if (dh < 3. / 6.) {            tor = tor.yzx;            a = a.yzx;        } else if (dh < 4. / 6.) {            tor = tor.zxy;            a = a.zxy;        } else if (dh < 5. / 6.) {            tor = tor.zyx;            a = a.zyx;        }    }    vec3 bg = vec3(.075, .125, .2) * noise;    bg *= clamp(cos((oP.x - oP.y) * 6.2831 * 128.) * 1., 0., 1.) * .15 + .925;    vec3 col = bg;    vec3 rimCol = vec3(1, .7, .5);    rimCol *= (smoothstep(0., .75, noise - .1) + .5);    vec3 torCol = vec3(.2, .4, 1);    a = clamp(cos(a * 48. + iTime * 0.) * 1. + .5, 0., 1.) * .25 + .75;    vec3 cc = max(.05 - tor * 32., 0.);    cc *= clamp(cos(tor * 6.2831 * 80.) * 1. + .5, 0., 1.) * .25 + .75;    if (u_showWeave < 0.5) {        cc *= (h * .9 + .1);    }    const float sf = .005, lw = .005;    col = mix(col, vec3(0), (1. - smoothstep(0., sf * 4., tor.x - .00)) * .5);    col = mix(col, vec3(0), 1. - smoothstep(0., sf, tor.x));    col = mix(col, rimCol * cc.x, 1. - smoothstep(0., sf, tor.x + lw));    col = mix(col, torCol * col.x * a.x, 1. - smoothstep(0., sf, tor.x + .015));    col = mix(col, vec3(0), 1. - smoothstep(0., sf, abs(tor.x + .015)));    col = mix(col, vec3(0), (1. - smoothstep(0., sf * 4., tor.y - .00)) * .5);    col = mix(col, vec3(0), 1. - smoothstep(0., sf, tor.y));    col = mix(col, rimCol * cc.y, 1. - smoothstep(0., sf, tor.y + lw));    col = mix(col, torCol * col.x * a.y, 1. - smoothstep(0., sf, tor.y + .015));    col = mix(col, vec3(0), 1. - smoothstep(0., sf, abs(tor.y + .015)));    col = mix(col, vec3(0), (1. - smoothstep(0., sf * 4., tor.z - .00)) * .5);    col = mix(col, vec3(0), 1. - smoothstep(0., sf, tor.z));    col = mix(col, rimCol * cc.z, 1. - smoothstep(0., sf, tor.z + lw));    col = mix(col, torCol * col.x * a.z, 1. - smoothstep(0., sf, tor.z + .015));    col = mix(col, vec3(0), 1. - smoothstep(0., sf, abs(tor.z + .015)));    if (u_showGrid > 0.5) {        vec3 c = vec3(distLine(p, p1), distLine(p1, p2), distLine(p2, p));        c /= gSc;        c.x = min(min(c.x, c.y), c.z);        vec3 torColGrid = col;        col = mix(col, vec3(0), (1. - smoothstep(0., sf * 2., c.x - .005)) * .65);        col = mix(col, torColGrid * 3., (1. - smoothstep(0., sf / 2., c.x - .0015)) * .75);    }    return col;}void mainImage(out vec4 fragColor, in vec2 fragCoord) {    vec2 uv = fragCoord / min(750., iResolution.y);    vec2 p = uv + vec2(.8660254, .5) * iTime * u_speed / 16.;    vec3 col = simplexWeave(p);    col = mix(col, col.yxz, -uv.y * .5 + .5);    uv = fragCoord / iResolution.xy;    col = mix(col.zyx / 2., col, pow(16. * uv.x * uv.y * (1. - uv.x) * (1. - uv.y), .125));    fragColor = vec4(sqrt(clamp(col, 0., 1.)), 1);}`;export const SimplexTruchetWeaveShaders = forwardRef<HTMLDivElement, SimplexTruchetWeaveShadersProps>((  {    className,    speed = 1.0,    scale = 5.0,    shape = 0,    showWeave = true,    showGrid = false,    ...props  },  ref) => {  return (    <div      ref={ref}      className={cn('w-full h-full', className)}      {...props}    >      <Shader        fs={fragmentShader}        uniforms={{          u_speed: { type: '1f', value: speed },          u_scale: { type: '1f', value: scale },          u_shape: { type: '1f', value: shape },          u_showWeave: { type: '1f', value: showWeave ? 1.0 : 0.0 },          u_showGrid: { type: '1f', value: showGrid ? 1.0 : 0.0 },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});SimplexTruchetWeaveShaders.displayName = "SimplexTruchetWeaveShaders";export default SimplexTruchetWeaveShaders;

Created by Shane in 2018-07-12

Built for React applications with TypeScript and Next.js in mind. The animation runs entirely on the GPU using WebGL simplex grid mathematics with toroidal segment rendering and sophisticated weave algorithms. Works seamlessly with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/simplex-truchet-weave-shaders.json

npx shadcn@latest add https://www.shadcn.io/registry/simplex-truchet-weave-shaders.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/simplex-truchet-weave-shaders.json

bunx shadcn@latest add https://www.shadcn.io/registry/simplex-truchet-weave-shaders.json

Usage

import { SimplexTruchetWeaveShaders } from "@/components/ui/simplex-truchet-weave-shaders";

export default function Hero() {
  return (
    <SimplexTruchetWeaveShaders>
      <div className="relative z-10">
        <h1>Your content here</h1>
      </div>
    </SimplexTruchetWeaveShaders>
  );
}

Why most weave implementations suck

Most developers try to create weave patterns with Canvas overlays or SVG path intersections. Bad idea. You're dealing with expensive DOM manipulations, complex layering calculations, and wondering why your React app feels sluggish. Some use CSS transforms with pseudo-elements, which sounds smart until you realize you're computing intersection logic for every pattern element on every frame.

This React component uses mathematical simplex grid tessellation with GPU-accelerated toroidal segment rendering. The GPU handles everything using optimized geometric algorithms with authentic weave mathematics. No JavaScript calculations, no DOM rendering, just smooth 60fps weave art.

Features

Zero JavaScript animation overhead - Pure WebGL simplex grid runs on GPU
Toroidal segment rendering with mathematical distance field calculations
Random rendering order creating authentic weave intersection patterns
Multiple shape options (circle, hexagon, dodecahedron) for varied aesthetics
TypeScript definitions for proper IDE support in React projects
Customizable parameters with 5 props for complete control
Performance optimization through efficient GPU geometric algorithms
shadcn/ui compatible for consistent design systems
Responsive design with automatic canvas resizing

API Reference

SimplexTruchetWeaveShaders

Main container component for the simplex weave effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Animation speed multiplier (0.1 to 3.0)
`scale`	`number`	`5.0`	Pattern scale and density (1.0 to 10.0)
`shape`	`number`	`0`	Toroidal shape (0: circle, 1: hexagon, 2: dodecahedron)
`showWeave`	`boolean`	`true`	Enable weave pattern vs stacked rings
`showGrid`	`boolean`	`false`	Show simplex grid construction lines
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

Common gotchas

Animation not working: WebGL might not be supported in the browser. The component logs warnings when WebGL initialization fails. Check browser compatibility.

Performance issues on mobile: Some older phones struggle with complex simplex calculations. Consider reducing scale and disabling showGrid for better performance.

Pattern too dense: Lower the scale prop for larger pattern elements with clearer weave structure. Values around 3.0-4.0 work well for prominent weave patterns.

Missing weave effect: Ensure showWeave={true} to enable random rendering order. Setting to false creates stacked rings instead of woven patterns.

Animation too fast: Lower the speed prop for more controlled pattern movement. Values around 0.3-0.5 work well for subtle weave flow.

Explore other shader-based background components for React applications:

Simplex Truchet Weave Shaders

Sophisticated simplex weave animation

Installation

Usage

Why most weave implementations suck

Features

API Reference

SimplexTruchetWeaveShaders

Common gotchas

You might also like

Triangle Mesh Incircles

Hexagon Grid Pattern

Smooth Voronoi Contours

Cellular Tiled Tunnel

Perspex Web Lattice

Abstract Mod Shaders

Questions developers actually ask

On this page

Simplex Truchet Weave Shaders

Reactsimplex-truchet-weave-shaders

Triangle Mesh Incircles

Hexagon Grid Pattern

Smooth Voronoi Contours

Cellular Tiled Tunnel

Perspex Web Lattice

Abstract Mod Shaders

How do I control the animation speed?

What shape options are available?

How do I control the weave pattern?

Can I see the underlying grid?

How do I optimize for mobile?

How do I make a static version?

How do I overlay content?

On this page