a simple React wrapper for Trianglify

Usage no npm install needed!

<script type="module">
  import planningcenterReactTrianglify from 'https://cdn.skypack.dev/@planningcenter/react-trianglify';




npm install --save @planningcenter/react-trianglify


yarn add @planningcenter/react-trianglify


Prop Type Default Notes
width number 500 Specify the width in pixels of the pattern to generate.
height number 300 Specify the height in pixels of the pattern to generate.
cellSize number 50 Specify the size in pixels of the mesh used to generate triangles.
variance number 0.75 Decimal value between 0 and 1. Specify the amount of randomness used when generating triangles.
seed string null Seeds the random number generator to create repeatable patterns.
xColors false, string or array of CSS-formatted colors "random" Valid string values are 'random', or the name of a colorbrewer palette (i.e. 'YlGnBu' or 'RdBu'). When set to 'random', a gradient will be randomly selected from the colorbrewer library. Valid array values should specify the color stops in any CSS format (i.e. ['#000000', '#4CAFE8', '#FFFFFF']).
yColors False, string or array of CSS-formatted colors "match" When set to 'match' the x-axis color gradient will be used on both axes. Otherwise, accepts the same options as xColors.
colorSpace string "lab" Supported values are rgb, hsv, hsl, hsi, lab and hcl.
fill boolean true Specifies whether the polygons generated by Trianglify should be filled in.
strokeWidth number 0 Specify the width of the strokes used to outline the polygons.
className string " " append classes to SVG wrapper div

For more detailed information on Trianglify's expected props, click here.


import React from "react";
import Trianglify from "@planningcenter/react-trianglify";

function App() {
  return (
    <Trianglify height={200} width={350} variance={0.5} />