JSFiddle - React, Tailwind, and code Playground

by thorst

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/trianglify.min.js"></script>
<div id="something"></div>

CSS

#something {
    height: 1000px;
    width:1000px;
    position: absolute;
    left: 30px;
    top: 30px;
    border:1px solid;
}

JavaScript

var something = document.getElementById('something');
var dimensions = something.getClientRects()[0];
var pattern = Trianglify({
    cell_size: 75,
    variance: 0.75,
    x_colors: ['#222253','#28345A','#36616C'],
    y_colors: 'match_x',
    palette: Trianglify.colorbrewer,
    color_space: 'rgb',
    color_function: false,
    stroke_width: 1.51,
    width: window.innerWidth-5,
    height: window.innerHeight-5,
    seed: 'd4hga',
    stroke_width: 1.51,
    color_function: null
});
something.appendChild(pattern.canvas());


//https://cdnjs.com/libraries/trianglify
//https://www.cssscript.com/polygon-pattern-trianglify/
// ['#fd5631','#666276','#ffffff','#f5f4f8','#454056']