How to use the trianglify function in trianglify
To help you get started, we’ve selected a few trianglify examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
YogeshPrasanna / expense-manager-react / src / components / App.js View on Github 
render() {
const bodyStyle = {
backgroundColor: this.state.settings
? this.state.settings.mode === "night"
? "#484842 !important"
: "auto"
: "auto",
height: "100vh"
};
var patternconfig = { height: 300, width: 500, cell_size: 35 }; // palette: Trianglify.colorbrewer,
var pattern = Trianglify({ ...patternconfig });
var pattern2 = Trianglify({ ...patternconfig });
var pattern3 = Trianglify({ ...patternconfig });
var pattern4 = Trianglify({ ...patternconfig });
var pattern5 = Trianglify({ ...patternconfig });
var pattern6 = Trianglify({ ...patternconfig });
var pattern7 = Trianglify({ ...patternconfig });
var pattern8 = Trianglify({ ...patternconfig });
const cards = {
card8: { backgroundImage: `url(${pattern8.png()})` },
card7: { backgroundImage: `url(${pattern7.png()})` },
card6: { backgroundImage: `url(${pattern6.png()})` },
card5: { backgroundImage: `url(${pattern5.png()})` },
card4: { backgroundImage: `url(${pattern4.png()})` },
card3: { backgroundImage: `url(${pattern3.png()})` },
card2: { backgroundImage: `url(${pattern2.png()})` },
card1: { backgroundImage: `url(${pattern.png()})` }
};? this.state.settings.mode === "night"
? "#484842 !important"
: "auto"
: "auto",
height: "100vh"
};
var patternconfig = { height: 300, width: 500, cell_size: 35 }; // palette: Trianglify.colorbrewer,
var pattern = Trianglify({ ...patternconfig });
var pattern2 = Trianglify({ ...patternconfig });
var pattern3 = Trianglify({ ...patternconfig });
var pattern4 = Trianglify({ ...patternconfig });
var pattern5 = Trianglify({ ...patternconfig });
var pattern6 = Trianglify({ ...patternconfig });
var pattern7 = Trianglify({ ...patternconfig });
var pattern8 = Trianglify({ ...patternconfig });
const cards = {
card8: { backgroundImage: `url(${pattern8.png()})` },
card7: { backgroundImage: `url(${pattern7.png()})` },
card6: { backgroundImage: `url(${pattern6.png()})` },
card5: { backgroundImage: `url(${pattern5.png()})` },
card4: { backgroundImage: `url(${pattern4.png()})` },
card3: { backgroundImage: `url(${pattern3.png()})` },
card2: { backgroundImage: `url(${pattern2.png()})` },
card1: { backgroundImage: `url(${pattern.png()})` }
};
return (
<div style="{bodyStyle}">
</div>render() {
const bodyStyle = {
backgroundColor: this.state.settings
? this.state.settings.mode === "night"
? "#484842 !important"
: "auto"
: "auto",
height: "100vh"
};
var patternconfig = { height: 300, width: 500, cell_size: 35 }; // palette: Trianglify.colorbrewer,
var pattern = Trianglify({ ...patternconfig });
var pattern2 = Trianglify({ ...patternconfig });
var pattern3 = Trianglify({ ...patternconfig });
var pattern4 = Trianglify({ ...patternconfig });
var pattern5 = Trianglify({ ...patternconfig });
var pattern6 = Trianglify({ ...patternconfig });
var pattern7 = Trianglify({ ...patternconfig });
var pattern8 = Trianglify({ ...patternconfig });
const cards = {
card8: { backgroundImage: `url(${pattern8.png()})` },
card7: { backgroundImage: `url(${pattern7.png()})` },
card6: { backgroundImage: `url(${pattern6.png()})` },
card5: { backgroundImage: `url(${pattern5.png()})` },
card4: { backgroundImage: `url(${pattern4.png()})` },
card3: { backgroundImage: `url(${pattern3.png()})` },
card2: { backgroundImage: `url(${pattern2.png()})` },const bodyStyle = {
backgroundColor: this.state.settings
? this.state.settings.mode === "night"
? "#484842 !important"
: "auto"
: "auto",
height: "100vh"
};
var patternconfig = { height: 300, width: 500, cell_size: 35 }; // palette: Trianglify.colorbrewer,
var pattern = Trianglify({ ...patternconfig });
var pattern2 = Trianglify({ ...patternconfig });
var pattern3 = Trianglify({ ...patternconfig });
var pattern4 = Trianglify({ ...patternconfig });
var pattern5 = Trianglify({ ...patternconfig });
var pattern6 = Trianglify({ ...patternconfig });
var pattern7 = Trianglify({ ...patternconfig });
var pattern8 = Trianglify({ ...patternconfig });
const cards = {
card8: { backgroundImage: `url(${pattern8.png()})` },
card7: { backgroundImage: `url(${pattern7.png()})` },
card6: { backgroundImage: `url(${pattern6.png()})` },
card5: { backgroundImage: `url(${pattern5.png()})` },
card4: { backgroundImage: `url(${pattern4.png()})` },
card3: { backgroundImage: `url(${pattern3.png()})` },
card2: { backgroundImage: `url(${pattern2.png()})` },
card1: { backgroundImage: `url(${pattern.png()})` }
};
return (generatePattern ({ output, ...props }) {
const pattern = trianglify(props)
const outputMethod = pattern[output]
this[this.outputTypes(output).method](outputMethod)
}_renderCanvas() {
const canvas = ReactDOM.findDOMNode(this);
Trianglify(this.props).canvas(canvas);
}
}trianglify
Trianglify is a javascript library for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds.
