How to use trianglify - 10 common examples
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 (constructor(props) {
super(props);
this.state = React.addons.update(Trianglify.defaults, {}); // Copy Trianglify.defaults instead of referencing it. Prevents heisenbugs
}class HomeContainer extends PureComponent {
static fetchData({ dispatch }) {
return Promise.all([
dispatch(ModelActions.getTopModels()),
dispatch(ModelActions.getLatestModels())
]);
}
static propTypes = {
latestModels: React.PropTypes.instanceOf(Immutable.List),
topModels: React.PropTypes.instanceOf(Immutable.List)
};
state = {
...Trianglify.defaults,
width: process.env.BROWSER ? window.innerWidth : DEFAULT_WIDTH,
height: process.env.BROWSER ? window.innerHeight : DEFAULT_HEIGHT,
x_colors: 'YlGnBu',
cell_size: 40,
resize_timer: null,
variance: 0.75,
seed: Math.random()
};
componentDidMount() {
window.addEventListener('resize', this._onDebounceResize);
window.addEventListener('orientationchange', this._onDebounceResize);
this.setState({
// Provide some offset height at initial load
height: ReactDOM.findDOMNode(this.refs.hero).offsetHeight + 25
});constructor(props) {
super(props);
this.state = React.addons.update(Trianglify.defaults, {}); // Copy Trianglify.defaults instead of referencing it. Prevents heisenbugs
this.state.width = 700;
this.state.x_colors = 'random';
this.state.seed = Math.random().toString(36).substr(2, 5);
if(props.demo === 'palette') {
this.state.palette = [
['#468966', '#FFF0A5', '#FFB03B', '#B64926', '#8E2800'],
['#96CA2D', '#B5E655', '#EDF7F2', '#4BB5C1', '#7FC6BC'],
['#EA6045', '#F8CA4D', '#F5E5C0', '#3F5666', '#2F3440']];
}
if(props.demo === 'color_function') {
this.state.color_function = function(x, y) {
return 'hsl('+Math.floor(Math.abs(x*y)*360)+',80%,60%)';
}
}
}constructor(props) {
super(props);
this.state = React.addons.update(Trianglify.defaults, {}); // Copy Trianglify.defaults instead of referencing it. Prevents heisenbugs
this.state.height = window.innerHeight;
this.state.width = window.innerWidth;
this.state.x_colors = 'RdBu';
this.state.cell_size = 40;
this.state.resize_timer = null;
this.state.seed = Math.random();
}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.
