Crimson Geometric Triangles

CSSLight

Geometric Triangles in pure CSS, recoloured from a community pattern on uiverse.io. It does not animate.

#pattern#css#uiverse#css#geometric#triangles#patterned#repetitive#crimson

Live preview

2 files

import "./geometric-triangles.css";

// Render <GeometricTriangles /> inside a container with position: relative.
export function GeometricTriangles() {
  return (
    <div className="geometric-triangles-bg geometric-triangles-bg--light">
      <div className="container" />
    </div>
  );
}

Copy or download any file. The HTML build loads Three.js from a CDN via an import map, so it runs by just opening index.html. The React build is react-three-fiber; setup notes live at the top of each file.

Variants

20 of this pattern · page 1 of 2